vue.js - vue2.0过渡 javascript钩子函数无效
本文介绍了vue.js - vue2.0过渡 javascript钩子函数无效的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！
问题描述
问 题
如上图，小球的下落效果，v-on:before-enter="beforeDrop"和v-on:enter="enterDrop"两个函数是生效了的，可是v-on:after-enter="afterDrop"这个钩子函数并不能执行，请问是怎么回事？
解决方案
官网截图 你的enter回调函数里应该要有done()
增加一个例子
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.3.4/vue.min.js"></script>
</head>
<body>
<div id="example-4">
<button @click="show = !show">
Toggle
</button>
<transition
v-on:before-enter="beforeEnter"
v-on:enter="enter"
v-on:after-enter='afterEnter'
v-bind:css="false"
>
<p v-if="show">
Demo
</p>
</transition>
</div>
<script>
new Vue({
el: '#example-4',
data: {
show: false
},
methods: {
beforeEnter: function (el) {
console.log('准备进入')
},
enter: function (el, done) {
console.log('进入')
done()
},
afterEnter(el){
console.log('进入之后')
}
}
})
</script>
</body>
</html>结果如下，点击按钮之后，三个毁掉函数依次触发
这篇关于vue.js - vue2.0过渡 javascript钩子函数无效的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
查看全文
