Shulou(Shulou.com)06/03 Report--

Editor to share with you how to use JavaScript to detect when the CSS conversion ends, I believe most people do not know much about it, so share this article for your reference, I hope you can learn a lot after reading this article, let's go to know it!

Detect when the conversion ends

We can use JavaScript to detect when the CSS transformation ends by clicking the "transitionend" event. As with setting the CSS3 property, it is important to note that some older versions of Chrome and Safari still depend on the prefix version of the event. To consider all possible prefixes, we can use the following function transitionend to return the supported "" event in the browser:

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)

}

In this case, the event object is populated with properties, two of which are more useful event.propertyName, which returns a string containing a list of converted CSS3 property names, and event.elapsedTime returns the duration of the conversion in seconds.

The above is all the content of the article "how to use JavaScript to detect when the CSS conversion ends". Thank you for reading! I believe we all have a certain understanding, hope to share the content to help you, if you want to learn more knowledge, welcome to follow the industry information channel!

Welcome to subscribe "Shulou Technology Information " to get latest news, interesting things and hot topics in the IT industry, and controls the hottest and latest Internet news, technology news and IT industry trends.