|
|
最近在学习vue.js发现钩子函数这一块，有一个done函数，莫名奇妙难懂，网上翻遍了，整了3个多小时，才弄明白怎么回事。
所以特地写下一个超简单的示例供学习者理解参考。不多说，上代码：后面有图解<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>vue done</title>
<script src="https://cdn.staticfile.org/vue/2.4.2/vue.min.js"></script>
</head>
<body>
<div id="test">
<button @click="show=!show">点我有讲解</button>
<transition v-on:before-enter="beforeEnter"
v-on:enter="enter"
v-on:after-enter="afterXianshi"
v-on:before-leave="beforeLeave"
v-on:leave="leave"
v-on:after-leave="afterXiaoshi"
v-bind:css="false">
<p v-if="show">
VUE菜鸟教程 - done函数作用讲解-作者QQ 4-9-8-3-5-777-9
</p>
</transition>
</div>
<script>
var vm = new Vue({
el: '#test',
data: {
show: false
},
methods: {
beforeEnter: function(el) {
console.log("显示之前 beforeEnter 函数被调用");
alert("显示之前 beforeEnter函数被调用");
},
enter: function(el, done) {
console.log("enter");
alert("现在正在执行enter函数代码，你可以在这里写各种动画实现显示效果……");
// 显示过程的动画运行结束了，可以使用done()通知VUE去执行after-Leave函数了(假如有)
done(); // 调用这个系统函数，就是告诉vue，动画结束了，如果注释，就不会调afterXianshi
},
afterXianshi: function(el) { //这里我们把钩子函数enter后的afterenter函数写上
console.log("after-enter");
console.log("----------");
alert("这是 afterXianshi(显示) 函数弹出来的框");
},
beforeLeave: function(el, done) {
console.log("消失之前 beforeLeave 函数被调用");
alert("显示之前 beforeEnter函数被调用");
},
leave: function(el, done) {
console.log("leave");
alert("现在正在执行leave函数代码，你可以在这里写各种动画实现消失效果……");
// 消失的动画运行结束了，可以使用done()通知VUE去执行after-Leave函数了(假如有)
done(); // 调用这个系统函数，就是告诉vue，动画结束了，如果注释，就不会调afterXiaoshi
},
afterXiaoshi(el){
console.log("after-leave");
alert("这是 afterXiaoshi(消失) 函数弹出来的框");
console.log("");
}
}
})
</script>
</body>
</html>
|
总结：
当只用 JavaScript 过渡的时候，在 enter 和 leave 中必须使用 done 进行回调。否则，它们将被同步调用，过渡会立即完成。
如果形参不指定 done ，则表明用户不手动控制动画的结束，而转由节点的transition或者animationEnd 来标识动画结束，开始回调 afterEnter。
钩子函数的形参的个数大于1，表示形参中有done, 也就是说用户必须手动控制动画何时结束。所以一旦你配置了done形参，则转由你告诉框架，动画何时结束。需要在合适的时机调用done，否则 afterEnter接口就没法被调用了。
原文链接：https://blog.csdn.net/wzj26638719/article/details/103936381
作者：发扬光大
程序猿的技术大观园：www.javathinker.net
|
|
Java技术网站 → 『 Java开发技术 』 → 『 Web前端开发技术专题 』 → 彻底明白VUE中的done参数和函数作用
消息
查看
搜索
好友
邮件
复制
引用
IP: 已设置保密