Angular2 のアニメーション システムは、さまざまなアニメーション効果を生成する機能を提供し、ネイティブ CSS アニメーションと同じパフォーマンスのアニメーションを構築することに重点を置いています。主に @Component と組み合わせられます。アニメーションのメタデータ プロパティは @Component デコレーターで定義されます。テンプレートのメタデータ属性と同じです。これにより、アニメーション ロジックをアプリケーション コードと緊密に統合できるようになり、アニメーションの開始と制御が容易になります。この記事ではangular2系のトランジションアニメーションのサンプルコードを中心に紹介していますが、編集者がかなり良いと思ったので参考にさせていただきます。編集者をフォローして見てみましょう。皆さんのお役に立てれば幸いです。
1. app.mudule.tsで紹介します:
@ngmodule:
import { BrowserAnimationsModule } from '@angular/platform-browser/animations';
にインポートを追加します。
imports: [BrowserAnimationsModule],
'@angular/core' から import {HostBinding } を導入します (導入している場合は、HostBinding を直接追加しないでください)。もう一度紹介してください。話しすぎています...)
あなたが作成したアニメーション テンプレートを紹介します: import { slideInDownAnimation } from '../animation';
@Component を追加します:animations:[slideInDownAnimation],
最後に:
import { animate, AnimationEntryMetadata, state, style, transition, trigger } from'@angular/core'; // Component transition animations export const slideInDownAnimation: AnimationEntryMetadata = // 动画触发器名称 trigger('routeAnimation', [ state('*', style({ opacity: 1, transform: 'translateX(0)' }) ), transition(':enter', [ style({ opacity: 0, transform: 'translateX(-100%)' }), animate('0.2s ease-in') ]), transition(':leave', [ animate('0.5s ease-out', style({ opacity: 0, transform: 'translateY(100%)' })) ]) ]);
関連する推奨事項:
vue-route を使用して左右のページめくりトランジション アニメーションを自動的に決定する方法 回転アニメーションを実装する JavaScript キャンバス angular2.0 プロジェクトを構築する簡単な方法以上がAngular2 ルーティング遷移アニメーション例解説の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。