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

最新推荐文章于 2025-06-10 18:35:04 发布

古月的博客

最新推荐文章于 2025-06-10 18:35:04 发布

阅读量8.4k

点赞数 1

CC 4.0 BY-SA版权

本文链接：https://blog.youkuaiyun.com/qq_34345149/article/details/87291120

本文探讨了在Vue中使用JavaScript过渡时，如何通过定时器设置样式并确保使用done回调来实现平滑过渡。提供了具体代码示例，展示了在enter和leave钩子中正确使用done方法的重要性。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

##发现当你使用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>