广告
返回顶部
首页 > 资讯 > 精选 >怎么使用JavaScript检测CSS转换何时结束
  • 576
分享到

怎么使用JavaScript检测CSS转换何时结束

2023-06-02 17:06:01 576人浏览 八月长安
摘要

本篇内容介绍了“怎么使用javascript检测CSS转换何时结束”的有关知识,在实际案例的操作过程中,不少人都会遇到这样的困境,接下来就让小编带领大家学习一下如何处理这些情况吧!希望大家仔细阅读,能够学有所成!我们可以使用JavaScri

本篇内容介绍了“怎么使用javascript检测CSS转换何时结束”的有关知识,在实际案例的操作过程中,不少人都会遇到这样的困境,接下来就让小编带领大家学习一下如何处理这些情况吧!希望大家仔细阅读,能够学有所成!

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

1

2

3

4

5

6

7

8

9

10

11

12

13

14

15

16

17

18

19

20

21

22

23

24

function gettransitionend(){<font></font>

    var root = document.documentElement<font></font>

    var transitions = {<font></font>

        'transition':'transitionend',<font></font>

        'OTransition':'oTransitionEnd',<font></font>

        'MozTransition':'transitionend',<font></font>

        'WEBkitTransition':'webkitTransitionEnd'<font></font>

        }<font></font>

    <font></font>

    for (var t in transitions){<font></font>

        if (root.style[t] !== undefined ){<font></font>

            return transitions[t];<font></font>

        }<font></font>

    }<font></font>

    return undefined<font></font>

}<font></font>

<font></font>

//Example Usage:<font></font>

var transitionendevt = gettransitionend()<font></font>

if (transitionendevt){ // if transitionend event supported by browser<font></font>

    element.addEventListener(transitionendevt, function(e){<font></font>

        // do something after end of transition<font></font>

    }, false)<font></font>

}

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

“怎么使用JavaScript检测CSS转换何时结束”的内容就介绍到这里了,感谢大家的阅读。如果想了解更多行业相关的知识可以关注编程网网站,小编将为大家输出更多高质量的实用文章!

--结束END--

本文标题: 怎么使用JavaScript检测CSS转换何时结束

本文链接: https://www.lsjlt.com/news/230705.html(转载时请注明来源链接)

有问题或投稿请发送至: 邮箱/279061341@qq.com    QQ/279061341

本篇文章演示代码以及资料文档资料下载

下载Word文档到电脑,方便收藏和打印~

下载Word文档
猜你喜欢
  • 怎么使用JavaScript检测CSS转换何时结束
    本篇内容介绍了“怎么使用JavaScript检测CSS转换何时结束”的有关知识,在实际案例的操作过程中,不少人都会遇到这样的困境,接下来就让小编带领大家学习一下如何处理这些情况吧!希望大家仔细阅读,能够学有所成!我们可以使用JavaScri...
    99+
    2023-06-02
  • 如何使用JavaScript检测CSS转换何时结束
    小编给大家分享一下如何使用JavaScript检测CSS转换何时结束,相信大部分人都还不怎么了解,因此分享这篇文章给大家参考一下,希望大家阅读完这篇文章后大有收获,下面让我们一起去了解一下吧!检测转换何时结...
    99+
    2022-10-19
  • 如何使用JavaScript函数暂时禁用CSS转换
    这篇文章给大家分享的是有关如何使用JavaScript函数暂时禁用CSS转换的内容。小编觉得挺实用的,因此分享给大家做个参考,一起跟随小编过来看看吧。这个提示实际上不是一个JavaScript函数,而是一个...
    99+
    2022-10-19
软考高级职称资格查询
编程网,编程工程师的家园,是目前国内优秀的开源技术社区之一,形成了由开源软件库、代码分享、资讯、协作翻译、讨论区和博客等几大频道内容,为IT开发者提供了一个发现、使用、并交流开源技术的平台。
  • 官方手机版

  • 微信公众号

  • 商务合作