作者介紹：筆者本身并沒(méi)有寫(xiě)過(guò)太多的文章移稳，雖然有自己的個(gè)人博客，但是以前也不會(huì)去養(yǎng)成寫(xiě)文章的習(xí)慣会油。之所以寫(xiě)這篇文章是發(fā)現(xiàn)網(wǎng)上寫(xiě)angular2的animation教程少的可憐秒裕，所以自己實(shí)踐了一些動(dòng)畫(huà)，并且將這些過(guò)程記錄下來(lái)钞啸，希望自己以后也能回顧一下几蜻。
首先喇潘，介紹一下angular的animation吧。從angular4開(kāi)始梭稚，animation被獨(dú)立出來(lái)形成了一個(gè)@angular/animations的包颖低。所以記得在使用之前需要安裝一下這個(gè)包。
npm install @angular/animations --save (這條命令可以安裝動(dòng)畫(huà))弧烤。
安裝完之后就可以在項(xiàng)目中使用了忱屑。
使用animation前，需要在當(dāng)前組件的Module中導(dǎo)入BrowserAnimationsModule暇昂。這樣才能夠在組件中使用動(dòng)畫(huà)莺戒。
接下來(lái)，講一下編寫(xiě)動(dòng)畫(huà)的方法急波，有兩種方式从铲，一種是新建一個(gè)ts文件，在ts文件中編寫(xiě)一個(gè)動(dòng)畫(huà)澄暮，然后導(dǎo)入到組件中名段；另一種方式就是直接在組件中編寫(xiě)。
//新建的一個(gè)ts文件 animation.ts
import {trigger,state,translation,style,animate,keyframes} from '@angluar/animations';
export const fadeIn = trigger(
.... //這是第一種方式
)
編寫(xiě)好動(dòng)畫(huà)之后泣懊，將其導(dǎo)入component的animations中伸辟。
import {Component} from '@angular/core';
import {fadeIn} from './fadeIn.ts';
@Component({
animations: [fadeIn],
...
})
上面的這種寫(xiě)法可以將一個(gè)動(dòng)畫(huà)復(fù)用到多個(gè)組件中去，一般寫(xiě)大型項(xiàng)目時(shí)馍刮，建議使用這種方式信夫。但是，我接下來(lái)的小demo將會(huì)使用第二種方式去書(shū)寫(xiě)卡啰。
這個(gè)小demo就是平時(shí)大家都會(huì)用到的下拉列表静稻，下圖是我在寫(xiě)測(cè)試的時(shí)候?qū)懙模?/p>
這兩張圖是，最終狀態(tài)的結(jié)果圖碎乃，下面來(lái)看一下中間動(dòng)畫(huà)的源代碼：
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: '*'}), //離場(chǎng)動(dòng)畫(huà)，div塊的高度從自適應(yīng)逐漸變成0
style({height: '0'})
]))),
transition('close => open', animate('330ms', keyframes([
style({height: '0'}), //進(jìn)場(chǎng)動(dòng)畫(huà)惠奸，div塊的高度從0到自適應(yīng)的高度
style({height: '*'})
])))
])
]
})
export class AppComponent {
public state = 'close';
public changeOpen() { //點(diǎn)擊展開(kāi)按鈕時(shí)梅誓，div塊進(jìn)場(chǎng)
this.state = 'open';
}
public changeClose() { //點(diǎn)擊離開(kāi)按鈕時(shí)，div塊離場(chǎng)
this.state = 'close';
}
}
整個(gè)動(dòng)畫(huà)有兩個(gè)狀態(tài)‘open’和'close'佛南，打開(kāi)時(shí)open梗掰，div塊是顯示的，close時(shí)嗅回，div塊時(shí)隱藏的及穗。在整個(gè)div塊有一個(gè)進(jìn)場(chǎng)的動(dòng)畫(huà)和離場(chǎng)的動(dòng)畫(huà)峰弹。
下面是整個(gè)小測(cè)試的html和css源碼
<button (click)="changeOpen()">展開(kāi)</button>
<div class="test-div" [@animation]="state">
<ul>
<li>測(cè)試</li>
<li>測(cè)試</li>
<li>測(cè)試</li>
<li>測(cè)試</li>
<li>測(cè)試</li>
<li>測(cè)試</li>
</ul>
</div>
<button (click)="changeClose()">收起</button>
.test-div{
width: 100px;
position: relative;
overflow: hidden;
}
.test-div ul{
list-style: none;
}
這個(gè)小動(dòng)畫(huà)能夠在很多的小場(chǎng)景下使用匀奏，如圖：
這是第一次在簡(jiǎn)書(shū)寫(xiě)文章，我也只是想寫(xiě)點(diǎn)有意思的前端小玩意呐赡，然后將實(shí)現(xiàn)的過(guò)程記錄下來(lái)，方便以后查看焚虱。
注：這篇博文屬于原創(chuàng)博文购裙，如果有問(wèn)題的可以給我留言，轉(zhuǎn)載注明出處鹃栽。
