程序有问题，一直输入动画结束，除了第一次动画正确，但是一次动画开始也没有
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Vue中的JS动画与velocity.js</title>
<script src="./vue.js"></script>
</head>
<body>
<div id="root">
<transition
name="fade"
@before-enter="handleBeforeEnter"
@enter="handleEnter"
@after-enter="handleAfterEnter"
@before-leave="handleBeforeLeave"
@leave="handleLeave"
@after-leave="handleAfterLeave"
>
<div v-if="show">Hello World</div>
</transition>
<button @click="handleClick">toggle</button>
</div>
<script>
var vm = new Vue({
el: "#root",
data: {
show: true
},
methods: {
handleClick: function() {
this.show = !this.show
},
handleBeforeEnter: function(el) {
el.style.opacity = 0;
},
handleEnter: function(el, done) {
el.style.opacity=1;
el.style.transition='opacity 5s ease';
el.ontransitionEnd=function(){
done();
};
},
handleAfterEnter: function(el) {
console.log("动画开始")
},
handleBeforeLeave: function(el) {
el.style.opacity = 1;
},
handleLeave: function(el, done) {
el.style.opacity=0;
el.style.transition='opacity 5s ease';
el.ontransitionEnd=function(){
done();
};
},
handleAfterLeave: function(el) {
console.log("动画结束")
}
}
})
</script>
</body>
</html>
574
收起
正在回答 回答被采纳积分+3
相似问题
提个关于原生JS滚动执行动画的问题
1611
0
4
老师，我这边添加 他虽然有动画但不是按照我想得去动 删除已有动画
330
0
4
关于动画shopcart-list动画
1018
2
2
gsap动画bug？
539
0
7
Velocity显示动画的时候第一次点击可以，第二次就不行了
788
0
3
登录后可查看更多问答，登录/注册
Vue2.5-2.6-3.0开发去哪儿网App 零基础入门到实战
- 参与学习 10556 人
- 提交作业 542 份
- 解答问题 8178 个
课程紧跟Vue3版本迭代，企业主流版本Vue2+Vue3全掌握
了解课程
