angular4動畫的使用

引入動畫模塊

angular4的動畫模塊是獨立出去，因此要經過npm來下拉動畫模塊

npm install -S  @angular/animations; [-S : save ]

在app.module.ts中導入動畫模塊並註冊

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

// 註冊
imports: [
    BrowserModule,
    BrowserAnimationsModule,
    routing
  ]

下面就開始寫一個簡單的動畫

1：這裏是封裝好動畫引入，在animations裏面新建一個fly-in.ts文件

2：引入動畫須要的模塊

3：編寫默認，出場，離場的動畫

下面是實現代碼

// 以後和平時使用動畫差很少，在須要的地方引入相關的指令，接口什麼的
import {
  trigger,  // 動畫封裝觸發，外部的觸發器
  state, // 轉場狀態控制
  style, // 用來書寫基本的樣式
  transition, // 用來實現css3的 transition
  animate, // 用來實現css3的animations
  keyframes // 用來實現css3 keyframes的
} from "@angular/animations";
export const flyIn = trigger('flyIn', [
  state('in', style({transform: 'translate(0)'})), // 默認平移0

  transition('void => *', [ // 進場動畫
    animate(300, keyframes([
      style({opacity: 0, transform: 'translateX(-100%)', offset: 0}),
      style({opacity: 1, transform: 'translateX(25px)',  offset: 0.3}),
      style({opacity: 1, transform: 'translateX(0)',     offset: 1.0})
    ]))
  ]),
  transition('* => void', [ // 離場動畫
    animate(300, keyframes([
      style({opacity: 1, transform: 'translateX(0)',     offset: 0}),
      style({opacity: 1, transform: 'translateX(-25px)', offset: 0.7}),
      style({opacity: 0, transform: 'translateX(100%)',  offset: 1.0})
    ]))
  ])

]);

在要使用的組件的component.ts的實現

在component這個裝飾器裏面注入要依賴的動畫模塊

import {flyIn} from "../animations/fly-in";

@Component({
  selector: 'app-tongji',
  templateUrl: './tongji.component.html',
  styleUrls: ['./tongji.component.less'],
  animations: [
    flyIn
  ]
})

html中的實現

<div [@flyIn]>
  <p style="height: 40px; line-height: 40px; background: pink;">
    動畫
  </p>
</div>

  這樣就能夠輕鬆實現一個動畫了。