千家信息网

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

发表于:2025-02-14 作者:千家信息网编辑
千家信息网最后更新 2025年02月14日,本篇内容介绍了"怎么使用JavaScript检测CSS转换何时结束"的有关知识,在实际案例的操作过程中,不少人都会遇到这样的困境,接下来就让小编带领大家学习一下如何处理这些情况吧!希望大家仔细阅读,能
千家信息网最后更新 2025年02月14日怎么使用JavaScript检测CSS转换何时结束

本篇内容介绍了"怎么使用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(){

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转换何时结束"的内容就介绍到这里了,感谢大家的阅读。如果想了解更多行业相关的知识可以关注网站,小编将为大家输出更多高质量的实用文章!

0