先总结
transition标签内边的before-enter，enter，after-enter 是vue规定的 不要乱改 !!
//正确代码 后贴完整代码
<transition @before-enter="beforeEnter" @enter="enter" @after-enter="afterEnter">
<div id="ball" v-show="flag"></div>
</transition>
问题代码
//本来是 - 我误改为驼峰 这样奇奇怪怪的bug只有我一个人能遇到吧
<transition @beforeEnter="beforeEnter" @enter="enter" @afterEnter="afterEnter">
<div id="ball" v-show="flag"></div>
</transition>
问题描述
小球运动到指定位置，不会消失(done函数不会触发afterEnter函数)
beforeEnter，enter都可以执行，afterEnter却没有执行，神之迷惑
完整正确代码
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
//想直接复制用的话 注意vue引用 这里是本地地址
<script src="./vue/vue.js"></script>
<style>
#ball {
width: 14px;
height: 14px;
background-color: skyblue;
border-radius: 50%;
}
</style>
</head>
<body>
<div id="app">
<input type="button" value="半场动画展示" @click="flag=!flag">
<transition @before-enter="beforeEnter" @enter="enter" @after-enter="afterEnter">
<div id="ball" v-show="flag">
</transition>
</div>
</div>
</body>
<script>
new Vue({
el: "#app",
data: {
flag: false,
},
methods: {
beforeEnter(el) {
el.style.transform = "translate(0, 0)"
},
enter(el, done) {
el.offsetWidth
el.style.transform = "translate(37px,77px"
el.style.transition = "all 1s ease"
done()
},
afterEnter() {
this.flag = !this.flag
}
}
})
</script>
</html>
8143
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
