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

This article introduces the knowledge of "how to use JavaScript to detect when the CSS conversion ends". In the operation of actual cases, many people will encounter such a dilemma, so let the editor lead you to learn how to deal with these situations. I hope you can read it carefully and be able to achieve something!

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:

one

two

three

four

five

six

seven

eight

nine

ten

eleven

twelve

thirteen

fourteen

fifteen

sixteen

seventeen

eighteen

nineteen

twenty

twenty-one

twenty-two

twenty-three

twenty-four

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.

That's all for "how to use JavaScript to detect when the CSS conversion ends". Thank you for reading. If you want to know more about the industry, you can follow the website, the editor will output more high-quality practical articles for you!

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.