角2のトリガーなしでアニメーションコールバックにフック

Question

私はheader.componentというコンポーネントを持っています。私はCSSのアニメーションが終了したらメソッドを呼び出す必要があります。

私はあなたが（header.component.tsファイルで定義された）メソッドonAnimationFinishを呼び出すには、次の構文

<div class="header-div" (@anim.done)="onAnimationFinish($event)"></div> 

を使用することができる例をたくさん見てきました。ただし、これは.tsファイルに トリガを定義した場合にのみ機能します。私は私の質問があるので、私のアニメーションや.cssファイルで定義された遷移を維持したいと思います

：

がヘッダー内の@keyframeアニメーションにリンクされますアニメーショントリガーを定義する方法です。 component.cssファイルか、それとも100％強制ですか？ Angular 2を使用しているときに私のcssアニメーションをトリガーで定義していますか？

マイCSS：

@keyframes anim { 
0% { position:relative; width: 50px; left: 0px; } 
50% { position:relative; width: 100px; left: -25px; } 
100% { position:relative; width: 50px; left: 0px; } 
} 

.TSのみアニメーション「アニメーション」は終了したときに呼び出される関数を含むファイル。

ありがとうございました。

Answer 1

animationendイベントを試すことができます。しかしこれはブラウザの互換性に乏しい。

別のオプションは、アニメーションを別々のタイプスクリプトファイルで定義し、必要な場所にインポートすることです。どのように見るにはここをクリックしてください

チェック： Can you move your animations to an external file in Angular2?

Answer 2

アニメーション終了イベントを使用して、アニールHostListenerを使用して独自の属性ディレクティブにラップすることができます。それはそのように使用されます：

<div class="header-div" [myAnimationEnd]="onAnimationFinish($event)"</div> 

http://www.w3schools.com/jsref/event_animationend.asp

これはあなたのニーズに合った場合は、私は後であなたの実装例を提供できるアプローチの詳細を必要としています。