angular2路由轉場動畫實例講解-js教程-PHP中文網

angular2路由轉場動畫實例講解

小云云

發布： 2017-12-23 09:17:06

原創

1996 人瀏覽過

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

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

import { BrowserAnimationsModule } from &#39;@angular/platform-browser/animations&#39;;

登入後複製

並在@NgModule中的imports添加:

imports: [BrowserAnimationsModule],

登入後複製

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

import { animate, AnimationEntryMetadata, state, style, transition, trigger } from&#39;@angular/core&#39;;
// Component transition animations
export const slideInDownAnimation: AnimationEntryMetadata =
// 动画触发器名称
trigger(&#39;routeAnimation&#39;, [
  state(&#39;*&#39;,
    style({
      opacity: 1,
      transform: &#39;translateX(0)&#39;
    })
  ),
  transition(&#39;:enter&#39;, [
    style({
      opacity: 0,
      transform: &#39;translateX(-100%)&#39;
    }),
    animate(&#39;0.2s ease-in&#39;)
  ]),
  transition(&#39;:leave&#39;, [
    animate(&#39;0.5s ease-out&#39;, style({
      opacity: 0,
      transform: &#39;translateY(100%)&#39;
    }))
  ])
]);

登入後複製

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

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

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

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

最後:

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

登入後複製

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