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}),transform: 'translateX(0)',offset: 1.0})
    ]))
  ]),transition('* => void',[ // 离场动画
    animate(300,keyframes([
      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>

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

（编辑：李大同）

【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容!