angular2 animation实践

作者介绍：笔者本身并没有写过太多的文章，虽然有自己的个人博客，但是以前也不会去养成写文章的习惯。之所以写这篇文章是发现网上写angular2的animation教程少的可怜，所以自己实践了一些动画，并且将这些过程记录下来，希望自己以后也能回顾一下。

首先，介绍一下angular的animation吧。从angular4开始，animation被独立出来形成了一个@angular/animations的包。所以记得在使用之前需要安装一下这个包。

  npm install @angular/animations --save  (这条命令可以安装动画)。

安装完之后就可以在项目中使用了。

使用animation前，需要在当前组件的Module中导入BrowserAnimationsModule。这样才能够在组件中使用动画。

接下来，讲一下编写动画的方法，有两种方式，一种是新建一个ts文件，在ts文件中编写一个动画，然后导入到组件中；另一种方式就是直接在组件中编写。

    //新建的一个ts文件 animation.ts
    import {trigger,state,translation,style,animate,keyframes} from '@angluar/animations';

    export const fadeIn = trigger(
         ....                     //这是第一种方式
    )

编写好动画之后，将其导入component的animations中。

 import {Component} from '@angular/core';
 import {fadeIn} from './fadeIn.ts';

 @Component({
    animations: [fadeIn],
 ...
 })

上面的这种写法可以将一个动画复用到多个组件中去，一般写大型项目时，建议使用这种方式。但是，我接下来的小demo将会使用第二种方式去书写。
这个小demo就是平时大家都会用到的下拉列表，下图是我在写测试的时候写的：

列表收起时

列表展开时

这两张图是，最终状态的结果图，下面来看一下中间动画的源代码：

import { Component } from '@angular/core';
import {trigger, state, style, animate, keyframes, transition} from '@angular/animations';

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css'],
  animations: [
    trigger('animation', [
      state('open', style({display: 'block'})),
      state('close', style({display: 'none'})),
      transition('open => close', animate('330ms', keyframes([
        style({height: '*'}),             //离场动画，div块的高度从自适应逐渐变成0
        style({height: '0'})
      ]))),
      transition('close => open', animate('330ms', keyframes([
        style({height: '0'}),            //进场动画，div块的高度从0到自适应的高度
        style({height: '*'})
      ])))
    ])
  ]
})
export class AppComponent {
  public state = 'close';

  public changeOpen() {             //点击展开按钮时，div块进场
    this.state = 'open';
  }

  public changeClose() {                //点击离开按钮时，div块离场
    this.state = 'close';
  }
}

整个动画有两个状态‘open’和'close'，打开时open，div块是显示的，close时，div块时隐藏的。在整个div块有一个进场的动画和离场的动画。
下面是整个小测试的html和css源码

展开

  

    
测试
    
测试
    
测试
    
测试
    
测试
    
测试
  

收起

.test-div{
  width: 100px;
  position: relative;
  overflow: hidden;
}

.test-div ul{
  list-style: none;
}

这个小动画能够在很多的小场景下使用，如图：

下拉菜单

这是第一次在写文章，我也只是想写点有意思的前端小玩意，然后将实现的过程记录下来，方便以后查看。
注：这篇博文属于原创博文，如果有问题的可以给我留言，转载注明出处。