解决：vue 钩子函数 done()的理解

##发现当你使用js的定时器设置样式的时候，必须传入done方法，否则直接js执行完毕（可以不使用，也能达到目的，但是必须传）
另外：vue教程提到了有这么一段话：（当只用 JavaScript 过渡的时候，在 enter 和 leave 中必须使用 done 进行回调。否则，它们将被同步调用，过渡会立即完成。）
下面就是测试代码：（大家可以把done删掉，比较一下效果就明白了）
代码如下：直接粘贴可用（里面引用的的vue.js是我下载到本地的，你们自己网上找cdn引用地址把）；
##注：里面声明了timer定时器属性，目的是为了防止快速点击button按钮定时器无法清除的问题，大家可以了解一下；

<!DOCTYPE html>
<html>
<head><title>vue过渡和动画</title><script src="vue-2.5.22.js"></script><link rel="stylesheet" type="text/css" href="animate-3.7.0.css"></link>
</head>
<style>.translate-enter,.translate-leave-to{transform:translateX(50px);}.translate-enter-active,.translate-leave-active{transition:transform 5s  ease;}
</style>
<body><div id="cartoon"><button type="button" v-on:click.prevent="show = !show">action</button><transition v-on:enter="enter" v-on:leave="leave"><div v-show="show">{{ msg }}</div></transition> </div><script>var cartoon = new Vue({el:'#cartoon',data:{show:true,msg:'disappear an show',timer:null},methods:{enter:function(el,done){clearInterval(this.timer);if(Number(el.style.marginLeft) == 0){var marginLeft= Number(el.style.marginLeft);}else{var marginLeft=parseInt(el.style.marginLeft);}this.timer = setInterval(function(){marginLeft-=5;el.style.marginLeft=marginLeft+'px';if(marginLeft < 0){el.style.marginLeft=0;clearInterval(this.timer);}},30); },leave:function(el,done){clearInterval(this.timer);if(Number(el.style.marginLeft) == 0){var marginLeft= Number(el.style.marginLeft);}else{var marginLeft=parseInt(el.style.marginLeft);} this.timer = setInterval(function(){marginLeft+=5;el.style.marginLeft=marginLeft+'px';if(marginLeft == 200){clearInterval(this.timer); }},30)}}})</script>
</body>
</html>

解决：vue 钩子函数 done()的理解相关推荐

vue进入页面执行的钩子函数_深入理解Vue 的钩子函数
前言说到Vue的钩子函数,可能很多人只停留在一些很简单常用的钩子( created , mounted ),而且对于里面的区别,什么时候该用什么钩子,并没有仔细的去研究过,且Vue的生命周期在面试中 ...
vue钩子函数beforeRouteEnter
vue钩子函数beforeRouteEnter beforeRouteEnter 函数内部的 this 为 undefined,这是因为 beforeRouteEnter 是在页面创建前就执行的, 先 ...
vue 钩子函数使用async await
<!DOCTYPE html> <html><head><meta charset="utf-8" /><title>v ...
Vue钩子函数中的this为什么能指向Vue的实例而不是指向传入的参数options（Vue源码解读）
起因先看一段Vue的代码,在Vue的原型链上增加了一个setData方法,然后实例化Vue对象,传入一个Object类型的参数 Vue.prototype.setData = function (k ...
vue 声明周期函数_Vue2.0 探索之路——生命周期和钩子函数的一些理解
前言在使用vue一个多礼拜后,感觉现在还停留在初级阶段,虽然知道怎么和后端做数据交互,但是对于mounted这个挂载还不是很清楚的.放大之,对vue的生命周期不甚了解.只知道简单的使用,而不知道为什 ...
Vue生命周期和钩子函数的一些理解
vue生命周期简介咱们从上图可以很明显的看出现在vue2.0都包括了哪些生命周期的函数了. 生命周期探究对于执行顺序和什么时候执行,看上面两个图基本有个了解了.下面我们将结合代码去看看钩子函数的执 ...
vue钩子函数是什么，有什么没用
文章目录前言目标一.定义二.vue加载过程三.基本的使用参考前言人见白头嗔,我见白头喜目标理解钩子函数,和基本应用一.定义每个 Vue 实例在被创建时都要经过一系列的初始化过程 ...
Vue2.0 探索之路——生命周期和钩子函数的一些理解
前言在使用vue一个多礼拜后,感觉现在还停留在初级阶段,虽然知道怎么和后端做数据交互,但是对于mounted这个挂载还不是很清楚的.放大之,对vue的生命周期不甚了解.只知道简单的使用,而不知道为什 ...
mounted钩子函数_Vue 探索之路——生命周期和钩子函数的一些理解
对于执行顺序和什么时候,下面我们将结合代码去看看钩子函数的执行 <!DOCTYPE html> <html> <head><title></ti ...

解决：vue 钩子函数 done()的理解

解决：vue 钩子函数 done()的理解相关推荐

最新文章

热门文章