Angular2 ルーティング遷移アニメーション例解説

Angular2 のアニメーション システムは、さまざまなアニメーション効果を生成する機能を提供し、ネイティブ CSS アニメーションと同じパフォーマンスのアニメーションを構築することに重点を置いています。主に @Component と組み合わせられます。アニメーションのメタデータ プロパティは @Component デコレーターで定義されます。テンプレートのメタデータ属性と同じです。これにより、アニメーション ロジックをアプリケーション コードと緊密に統合できるようになり、アニメーションの開始と制御が容易になります。この記事ではangular2系のトランジションアニメーションのサンプルコードを中心に紹介していますが、編集者がかなり良いと思ったので参考にさせていただきます。編集者をフォローして見てみましょう。皆さんのお役に立てれば幸いです。

1. app.mudule.tsで紹介します：

rreeee

@ngmodule：

import { BrowserAnimationsModule } from '@angular/platform-browser/animations';

にインポートを追加します。

imports: [BrowserAnimationsModule],

3. 遷移アニメーションを追加する必要があるページ操作で

'@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 サイトの他の関連記事を参照してください。