CSS3動(dòng)畫很方便的能完成一些輕量級的過渡效果周霉，但在控制靈活性上有所欠缺喂急，今記錄一下vue通過事件來觸發(fā)CSS3動(dòng)畫的一種方法止邮。
大致原理是添加動(dòng)畫的class樣式，在動(dòng)畫完成后移除這個(gè)樣式欢摄，當(dāng)事件觸發(fā)時(shí)再加上這個(gè)樣式至朗。
代碼：
1、先設(shè)置好動(dòng)畫樣式Anim
.Anim{
animation: showMsg 0.6s;
}
@keyframes showMsg
{
from {opacity: 0;}
to {opacity: 1}
}
2剧浸、設(shè)置一個(gè)標(biāo)志位锹引，用來觸發(fā)動(dòng)畫效果
export default {
name: 'anmiTest',
data () {
return {
inAnimation:true
}
}
3、template內(nèi)綁定動(dòng)畫樣式唆香，設(shè)置在動(dòng)畫結(jié)束后把標(biāo)志位置false
<template>
<div :class="inAnimation?'Anim':''" @animationend='inAnimation=false'>
test
</div>
</template>
4嫌变、在需要觸發(fā)動(dòng)畫的事件中把標(biāo)志位置true即可
changeMsg(){
this.inAnimation=true;
}
