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