javascript - 如何实现动画完成前不响应事件?
怪我咯
怪我咯 2017-04-11 11:27:07
[JavaScript讨论组]

尝试仿照哔哩哔哩yoo效果做一个轮播图,表现如下:

![图片上传中...]

滑动效果使用transform:translate3d(-n*1000px,0px,0px)完成,左右按钮实现上一张/下一张。
问题是动画时间为500ms,如何在这500ms内不响应按钮上一张/下一张事件?

怪我咯
怪我咯

走同样的路,发现不同的人生

全部回复(4)
怪我咯

点击的时候 ,禁掉上一张下一张按钮的事件,定时五百毫秒后恢复按钮的事件。

天蓬老师

搞个class或者标志位呗……

PHPz

函数节流
http://www.alloyteam.com/2012/11/javascript-throttle/

高洛峰

设置一个flag,未运动时,flag=true,运动时,flag=false

xxx.click(function() {
    if(flag) {
        // 执行运动,并将flag的值设置为false
        flag = false;
        ...
    }
})

// 运动结束之后,将flag的值修改为true
xxx.on('transitionend', function() {
    flag = true;
    ...
})

至于如何判断运动已经结束,需要看你的运动方式是如何实现的,如果你通过js改变translate的值,那么需要通过回调函数来实现,只需要在你自定义的运动函数最末位添加一个回调即可

function animate(xx, xxxx, xxxxx, callback) {
    // 你的运动逻辑
    ....
    
    callback && callback()
}

如果你是通过css,修改className的方式来实现,那么就可以直接通过animationendtransitionend来实现,这2个事件分别在css的animation与transition运动结束后触发

热门教程
更多>
最新下载
更多>
网站特效
网站源码
网站素材
前端模板
关于我们 免责申明 意见反馈 讲师合作 广告合作 最新更新 English
php中文网:公益在线php培训,帮助PHP学习者快速成长!
关注服务号 技术交流群
PHP中文网订阅号
每天精选资源文章推送
PHP中文网APP
随时随地碎片化学习
PHP中文网抖音号
发现有趣的

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