vue通过事件触发CSS3动画

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;}

如果觉得《vue通过事件触发CSS3动画》对你有帮助，请点赞、收藏，并留下你的观点哦！