web-dev-qa-db-ja.com

Angular / 4-ルートアニメーションが機能しない

Angular Angular/4を使用したCLIプロジェクトにルートアニメーションを実装しようとしています。 this のチュートリアルに従っていますが、成功は限られています。

私のコードは

/src/app/_animations/fadein.animation.ts

import { trigger, state, animate, transition, style } from '@angular/animations';

export const fadeInAnimation =
// trigger name for attaching this animation to an element using the 
[@triggerName] syntax
    trigger('fadeInAnimation', [

        // route 'enter' transition
        transition(':enter', [
         // css styles at start of transition
        style({ opacity: 0 }),
         // animation and styles at end of transition
        animate('3000ms', style({ opacity: 1 }))
    ]),
]);

/src/app/dashboard/dashboard.component.ts

import { Component, OnInit } from '@angular/core';
import { SlimLoadingBarService } from 'ng2-slim-loading-bar';

// import fade in animation
import { fadeInAnimation } from './../_animations/fadein.animation';

import { PickJob } from './../pick-jobs/pick-job';
import { PickJobService } from './../pick-jobs/pick-job.service';
import { FlashService } from './../flash/flash.service';

@Component({
    templateUrl: './dashboard.component.html',
    styleUrls: ['./dashboard.component.css'],
    animations: [fadeInAnimation],
    Host: { '[@fadeInAnimation]': '' }
})
export class DashboardComponent {}

/src/app/dashboard/dashboard.component.html

<div class="container_flex">
    <div class="row">
        <div class="col-md-12">
            <div class="btn btn-block btn-primary block shadow">
                Print Next Pick Job
            </div>
            <a class="btn btn-block btn-danger shadow" routerLink="/pick-jobs" routerLinkActive="menu-active">
                List Pick Jobs
            </a>
            <a class="btn btn-block btn-warning shadow" routerLink="/cages/assign" routerLinkActive="menu-active">
                Print Pick Cage Labels
            </a>
        </div>
    </div>
</div>

/src/app/app.module.ts

...
import { BrowserAnimationsModule } from '@angular/platform-browser/animations';
...
@NgModule({
  imports: [    
      ...
      BrowserAnimationsModule,
      ...

アニメーションは決して実行されず、ページのロード前に完了しています。どちらかわかりません。誰かが私のコードでエラーを見つけることができますか？アドバイスは大歓迎です

angularanimation
13
prime

ルートアニメーションを使用して、スムーズなフェードアウト/効果を実現できます。

適用するアニメーションとルート遷移を定義します。

_const fadeIn = [
  query(':leave', style({ position: 'absolute', left: 0, right: 0, opacity: 1 })),
  query(':enter', style({ position: 'absolute', left: 0, right: 0, opacity: 0 })),
  query(':leave', animate('1s', style({ opacity: 0 }))),
  query(':enter', animate('1s', style({ opacity: 1 })))
]

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css'],
  /* Allow CSS in this component to cascade down to child components */
  encapsulation: ViewEncapsulation.None,
  animations: [
    trigger('routerAnimations', [
      transition('* => *', fadeIn)
    ])
  ]
})
_

テンプレートでルーターコンセントに注釈を付けます。

_<div class="page" [@routerAnimations]="prepareRouteTransition(outlet)">
  <router-outlet #outlet="outlet"></router-outlet>
</div>
_

app.component.tsに戻って、prepareRouteTransition(outlet)関数を実装します。

_prepareRouteTransition(outlet) {
    const animation = outlet.activatedRouteData['animation'] || {};
    return animation['value'] || null;
}
_

ルートが来る/行くルートに応じてカスタムアニメーションが必要な場合は、ルートにメタデータを追加する必要があります。詳細については、ng-conf 2017 here でMatias Niemelaの講演をご覧ください。ただし、- 彼のデモプロジェクト には実用的な例が含まれています。

8
SpaceFozzy

ええ、これは最初は簡単でちょっと微妙です。

Hostコンポーネントプロパティは使用しないでください。それはあなたのために何もしていません。

代わりに、アニメーション化するコンポーネントの「Host」要素に合成プロパティ@yourTriggerを追加します。そのコンポーネントに<app-dashboard>としてテンプレートに記述されたセレクターがある場合、実行しようとしていることは「属性」を追加することです：<app-dashboard @yourTrigger>

これは、@HostBindingを使用してコンポーネント自体で実行できます。

@Component({
    templateUrl: './dashboard.component.html',
    styleUrls: ['./dashboard.component.css'],
    animations: [routeAnimation],
})
export class DashboardComponent {
    @HostBinding('@routeAnimation') routeAnimation = true;
}

@HostBindingは、コンポーネントのHost要素にバインディングを設定します。これは、テンプレートのCSSで:Hostでアドレス指定する要素と同じです。

コンポーネントのanimationsプロパティと@HostBindingデコレータの両方が必要であることに注意してください。 HostBindingの値は、fadeInAnimationで参照されるアニメーションで使用するトリガーにする必要があります。チュートリアルでは常にこのトリガーをrouteAnimationと呼んでいますが、それがどれほど特別であるかはわかりませんが、おそらく良い習慣です。

1
John Christopher Jones