快上网专注成都网站设计 成都网站制作 成都网站建设
成都网站建设公司服务热线:028-86922220

网站建设知识

十年网站开发经验 + 多家企业客户 + 靠谱的建站团队

量身定制 + 运营维护+专业推广+无忧售后,网站问题一站解决

如何使用JavaScript检测CSS转换何时结束-创新互联

小编给大家分享一下如何使用JavaScript检测CSS转换何时结束,相信大部分人都还不怎么了解,因此分享这篇文章给大家参考一下,希望大家阅读完这篇文章后大有收获,下面让我们一起去了解一下吧!

成都创新互联坚持“要么做到,要么别承诺”的工作理念,服务领域包括:网站建设、成都网站制作、企业官网、英文网站、手机端网站、网站推广等服务,满足客户于互联网时代的乐业网站设计、移动媒体设计的需求,帮助企业找到有效的互联网解决方案。努力成为您成熟可靠的网络建设合作伙伴!

检测转换何时结束

我们可以使用JavaScript通过点击“ transitionend”事件来检测CSS转换何时结束。像设置CSS3属性一样需要注意的是,一些旧版本的Chrome和Safari仍然依赖于事件的前缀版本。为了考虑所有可能的前缀,我们可以使用以下函数transitionend在浏览器中返回支持的“ ”事件:

function gettransitionend(){

    var root = document.documentElement

    var transitions = {

        'transition':'transitionend',

        'OTransition':'oTransitionEnd',

        'MozTransition':'transitionend',

        'WebkitTransition':'webkitTransitionEnd'

        }

    

    for (var t in transitions){

        if (root.style[t] !== undefined ){

            return transitions[t];

        }

    }

    return undefined

}

//Example Usage:

var transitionendevt = gettransitionend()

if (transitionendevt){ // if transitionend event supported by browser

    element.addEventListener(transitionendevt, function(e){

        // do something after end of transition

    }, false)

}

在这种情况下 ,  事件对象 填充了一些属性,其中两个更有用event.propertyName,它返回一个字符串,其中包含已转换的CSS3属性名称列表,并event.elapsedTime返回转换的持续时间(以秒为单位)。

以上是“如何使用JavaScript检测CSS转换何时结束”这篇文章的所有内容,感谢各位的阅读!相信大家都有了一定的了解,希望分享的内容对大家有所帮助,如果还想学习更多知识,欢迎关注创新互联-成都网站建设公司行业资讯频道!


分享题目:如何使用JavaScript检测CSS转换何时结束-创新互联
转载注明:http://6mz.cn/article/ddjips.html

其他资讯