vue中如何实现过渡动画?

vue如何实现过渡动画

通过两种方式可以实现

class方式

在dom元素发生变化的时候为其添加特定的class,从而产生过渡效果

css的过渡状态
v-enter: 定义进入过渡的开始状态.
v-enter-active: 定义进入过渡的开始状态.
v-leave 定义离开过渡的开始状态
v-leave-active 定义离开过渡的结束状态

js方式

通过暴露出的过渡系统的钩子函数,我们在dom变化 的特定时期对其进行属性的操作,从而产生动画

监听动画结束事件

Vue为了知道过渡的完成 . 必须设置相应的事件监听器.这取决于给元素应用的css规则

// 监听动画结束事件
    document.getElementsByTagName('p')[0].addEventListener("animationend", function() {
        console.log(1111);
    })