angular2路由轉場動畫實例講解

Angular2的動畫系統賦予了製作各種動畫效果的能力，致力於構建出與原生CSS動畫性能相同的動畫，Angular2的動畫主要是和@Component結合在了一起。 animations元資料屬性在定義@Component裝飾。就像template元資料屬性！這樣就可以讓動畫邏輯與其應用程式碼緊緊整合在一起，這讓動畫可以更容易的出發與控制。本文主要介紹了angular2系列之路由轉場動畫的範例程式碼，小編覺得挺不錯的，現在分享給大家，也給大家做個參考。一起跟著小編過來看看吧，希望能幫助大家。

一.在app.mudule.ts中引入:

#

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

並在@NgModule中的imports添加:

imports: [BrowserAnimationsModule],

二.建立檔案定義名為animations.ts用來書寫轉場動畫

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%)'
    }))
  ])
]);

三.在需要添加轉場動畫的頁面操作

引入import {HostBinding } from '@angular/core';(如果引入過直接將HostBinding添加進去就好,不要重複引入,多嘴了...)

再引入你寫好的動畫模板:import { slideInDownAnimation } from '../animation';

在@Component中新增:animations:[slideInDownAnimation],

最後:

  // 添加@HostBinding属性添加到类中以设置这个路由组件元素的动画和样式
  @HostBinding('@routeAnimation') routeAnimation = true;
  @HostBinding('style.display') display = 'block';
  @HostBinding('style.position') position = 'absolute';

大家學會了嗎？趕快動手嘗試。

相關推薦：

如何用vue-route實現自動判斷左右翻頁轉場動畫

JavaScript canvas實作圍繞旋轉動畫

搭建angular2.0專案的簡單方法

以上是angular2路由轉場動畫實例講解的詳細內容。更多資訊請關注PHP中文網其他相關文章！