vue通过事件触发CSS3动画_vue点击触发动画

CSS3动画很方便的能完成一些轻量级的过渡效果，但在控制灵活性上有所欠缺，今记录一下vue通过事件来触发CSS3动画的一种方法。
大致原理是添加动画的class样式，在动画完成后移除这个样式，当事件触发时再加上这个样式。
1、先设置好动画样式Anim

.Anim{
  animation: showMsg 0.6s;
}
 
@keyframes showMsg
{
  from {opacity: 0;}
  to {opacity: 1}
}
1
2
3
4
5
6
7
8
9

2、设置一个标志位，用来触发动画效果

export default {
    name: 'anmiTest',
    data () {
      return {
        inAnimation:true
      }
    }
}
1
2
3
4
5
6
7
8

3、template内绑定动画样式，设置在动画结束后把标志位置false

<template>
  <div :class="inAnimation?'Anim':''" @animationend='inAnimation=false'>
    test
  </div>
</template>
1
2
3
4
5

4、在需要触发动画的事件中把标志位置true即可

changeMsg(){
  this.inAnimation=true;
}
1
2
3
4