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>

  这样就可以轻松实现一个动画了。