CSS3动画很方便的能完成一些轻量级的过渡效果，但在控制灵活性上有所欠缺，今记录一下vue通过事件来触发CSS3动画的一种方法。
大致原理是添加动画的class样式，在动画完成后移除这个样式，当事件触发时再加上这个样式。
代码：
1、先设置好动画样式Anim
.Anim{
animation: showMsg 0.6s;
}
@keyframes showMsg
{
from {opacity: 0;}
to {opacity: 1}
}
2、设置一个标志位，用来触发动画效果
export default {
name: 'anmiTest',
data () {
return {
inAnimation:true
}
}
3、template内绑定动画样式，设置在动画结束后把标志位置false
<template>
<div :class="inAnimation?'Anim':''" @animationend='inAnimation=false'>
test
</div>
</template>
4、在需要触发动画的事件中把标志位置true即可
changeMsg(){
this.inAnimation=true;
}
