angular 4プログラムアニメーション

Question

プログラムでアニメーションを追加するにはどうすればよいですか？

@Component({ 
    moduleId: module.id, 
    selector: 'my-toolbar', 
    templateUrl: './my-toolbar.component.html', 
    styleUrls: ['./my-toolbar.component.scss'], 
    encapsulation: ViewEncapsulation.None, 
    animations: [ 
     trigger('myToolbarState', [ 
      state('initial', style({top: '*'})), 
      state('up', style({top: '-50px')), 
      transition('initial => up, up => initial', 
       animate(HEADER_SHRINK_TRANSITION)) 
     ]) 
    ] 
}) 

アノテーションなしで同じように達成するにはどうすればよいですか？私の基本的な目標は、@Inputに基づいて異なる値を使用するダイナミックトリガ関数を作成することです。

アニメーションまたはトリガーに少なくとも1つの変数が必要であることに注意することが重要です。これはアニメーションをどのように再利用するかという点でこの質問を変えます。

Answer 1

animations[]のために使用され、以下に示すように、私は、次のファクトリクラスになってしまった

-

これは以下のように使用される：以下に示すようにAnimationTriggerMetadataを返す静的メソッドcreateTriggerと

@Component({ 
    selector: 'my-app-header', 
    moduleId: module.id, 
    templateUrl: './app-header.component.html', 
    styleUrls: ['./app-header.component.scss'], 
    animations: [ 
     MyToolbarAnimator.createTrigger('appHeaderState', '50px', '0') 
    ] 
}) 

定義MyToolbarAnimator

MyToolbarAnimator

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

export const HEADER_SHRINK_TRANSITION = '250ms cubic-bezier(0.4,0.0,0.2,1)'; 

export class MyToolbarAnimator { 
    static createTrigger(triggerName: string, initialTop: string, upTop: string): AnimationTriggerMetadata { 
     return trigger(triggerName, [ 
      state('initial', style({top: initialTop})), 
      state('up', style({top: upTop})), 
      transition('initial => up, up => initial', 
       animate(HEADER_SHRINK_TRANSITION)) 
     ]); 
    } 
}