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

小云云
リリース: 2017-12-23 09:17:06
オリジナル
1931 人が閲覧しました

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

関連ラベル:
ソース:php.cn
このウェブサイトの声明
この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。
人気のチュートリアル
詳細>
最新のダウンロード
詳細>
ウェブエフェクト
公式サイト
サイト素材
フロントエンドテンプレート
私たちについて 免責事項 Sitemap
PHP中国語ウェブサイト:福祉オンライン PHP トレーニング,PHP 学習者の迅速な成長を支援します!