In Angular 2.特定のランタイム値にどのようにアニメートしますか？

Question

角2では、絶対配置された要素の一部を（データが取り込まれるとすぐに）特定のランタイム値に適用したいと考えています。それ、どうやったら出来るの ？コードの状態設定を変更できますか？ （またはいくつかのコールバックと？）

@Component({ 
    animations: [ 
     trigger('blahState', [ 
     state ('closed', style({ top: '0px'})), 
     state ('open', style({ top: ??? (<= must be the position of some dom element) })), 
     transition('closed => open', animate('500ms ease-in'))]) 
     ] 
}) 

Answer 1

あなたのコンポーネントクラスの '状態' に変更することができます。たとえば

を：

コンポーネントテンプレート：

<div [@blahState]="my_animation_state"></div> 

とコンポーネントクラスを：

export MyComponent{ 
    public my_animation_state:string = 'open'; 
    toggleState() { 
     this.my_animation_state == 'open' ? 'closed' : 'open'; 
    } 
    } 

とあなたが

transition('closed => open', ... 

「オープン」最後に「閉じた」から状態を変更したとき、あなたはときに、アニメーションの終了イベントを呼び出すか、開始することができ、遷移を取得します：

<div [@blahState]="my_animation_state" (@blahState.done)="animationDone()" (@blahState.start)="animationStart()></div> 

とコンポーネントクラス：

animationStart() { 
// your code 
} 

animationDone(){ 
// your code 
} 

Good Luck！