作者介绍：笔者本身并没有写过太多的文章，虽然有自己的个人博客，但是以前也不会去养成写文章的习惯。之所以写这篇文章是发现网上写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源码
<button (click)="changeOpen()">展开</button>
<div class="test-div" [@animation]="state">
<ul>
<li>测试</li>
<li>测试</li>
<li>测试</li>
<li>测试</li>
<li>测试</li>
<li>测试</li>
</ul>
</div>
<button (click)="changeClose()">收起</button>
.test-div{
width: 100px;
position: relative;
overflow: hidden;
}
.test-div ul{
list-style: none;
}
这个小动画能够在很多的小场景下使用，如图：
这是第一次在简书写文章，我也只是想写点有意思的前端小玩意，然后将实现的过程记录下来，方便以后查看。
注：这篇博文属于原创博文，如果有问题的可以给我留言，转载注明出处。
