Angular アニメーションのアニメーション演習

Angular2 のアニメーション システムは、さまざまなアニメーション効果を作成する機能を提供し、ネイティブ CSS アニメーションと同じパフォーマンスのアニメーションを構築することに尽力しています。
Angular2 アニメーションは主に @Component と組み合わせられます。
アニメーションのメタデータ属性は @Component 装飾で定義されます。テンプレートのメタデータ属性と同じです。これにより、アニメーション ロジックがアプリケーション コードと緊密に統合され、アニメーションの開始と制御が容易になります。次のように、コールバック関数も非常にシンプルになります。 CSS セレクターと同じです。クエリを通じて、要素ごとに異なるアニメーション効果を実現できます。

  <p *ngIf="Group" style="height: 100px;width: 100px;background-color: black; border-radius: 50px;"
       [@GroupAnimate]="boxState" (@GroupAnimate.done)="Callback(false)" (@GroupAnimate.start)="Callback(true)">
  </p>


  Callback(f:boolean){
    if(f){
      console.log("动画开始");
    }else {
      console.log("动画结束");
    }
  }

関連する推奨事項;

CSS3 のtransform、transition、animation プロパティの違いの詳細な例

CSS でのアニメーションアニメーションの使用に関するチュートリアル

アニメーション実装により、浮遊雲のアニメーション例が可能になります

以上がAngular アニメーションのアニメーション演習の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。