解决：vue 钩子函数 done()的理解
##发现当你使用js的定时器设置样式的时候，必须传入done方法，（可以不使用，也能达到目的，但是必须传）代码如下：直接粘贴可用；##注：里面声明了timer定时器属性，目的是为了防止快速点击button按钮定时器无法清除的问题，大家可以了解一下；<!DOCTYPE html><htm
·
##发现当你使用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>
前往低代码交流专区
更多推荐
1
0- 0
已为社区贡献4条内容
所有评论(0)