javascript - 用vue写轮播,怎么判断在动画过程中
PHP中文网
PHP中文网 2017-04-11 12:06:34
[JavaScript讨论组]

next是点击下一张图触发的函数,可是连续点击会造成动画过快,所以怎么判断在过渡动画过程中呢,图中的代码

                next(){
                    if(this.index==this.originalData.num){
                        this.index=1
                    }else{
                        
                        this.index+=1
                    }
                    this.animate(this.originalData.img_width)
    
                },
                animate(offset){

                    var node=this.$refs.wrapperContent
                    var self=this;
                    var left=parseInt(node.style.left)-offset
                    this.isTrans=true
                    node.style.left=left+'px'
                    console.log(left)
                    setTimeout(function(){
                        if(left<-(self.originalData.num*self.originalData.img_width)){
                            self.isTrans=false
                            node.style.left=-self.originalData.img_width+'px'
                        }
                        if(left>-100){
                            self.isTrans=false
                            node.style.left=-self.originalData.num*self.originalData.img_width+'px'
                        }
                    },this.originalData.delay)
                }
PHP中文网
PHP中文网

认证高级PHP讲师

全部回复(1)
迷茫

按题主给的代码段,animate函数里this.isTrans=true已经做了节流阀设置,
那么在next函数可以判断节流阀状态来确认是否执行animate函数,代码修改如下:

next(){
    if(!this.isTrans){
        if(this.index==this.originalData.num){
            this.index=1
        }else{
            this.index+=1
        }
        this.animate(this.originalData.img_width);
    }
}
热门教程
更多>
最新下载
更多>
网站特效
网站源码
网站素材
前端模板
关于我们 免责申明 举报中心 意见反馈 讲师合作 广告合作 最新更新 English
php中文网:公益在线php培训,帮助PHP学习者快速成长!
关注服务号 技术交流群
PHP中文网订阅号
每天精选资源文章推送
PHP中文网APP
随时随地碎片化学习

Copyright 2014-2025 https://www.php.cn/ All Rights Reserved | php.cn | 湘ICP备2023035733号