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

This article is about how to use the JavaScript function to temporarily disable CSS conversion. The editor thinks it is very practical, so share it with you as a reference and follow the editor to have a look.

This hint is not really a JavaScript function, but a block of CSS code. Temporarily disabling CSS transitions may be useful or necessary when you adjust the value of the participating CSS property, which should happen immediately behind the scenes. This article on Stackoverflow provides a solution to this task, and by defining a "no conversion" class in CSS, you can add it to the element to temporarily stop any transformations on it:

one

two

three

four

five

six

.notransition {

-webkit-transition: none! important

-moz-transition: none! important

-o-transition: none! important

Transition: none! important

}

For example:

one

two

three

four

five

Targetel.classList.add ('notransition') / / disable transitions

Targetel.style.left = '10px' / / update "left" property but don't transition it

Targetel.offsetHeight / / Trigger a reflow, flushing the CSS changes

Targetel.classList.remove ('notransition') / / enable transitions again

Targetel.style.left = '500px' / / transition "left" property again

It is also important to add a "no transformation" class to force the browser to perform every change made by the sitting element by accessing the element targetel.offsetHeight (offsetHeight is a few DOM attributes that trigger element backflow when accessed).

Thank you for reading! On "how to use the JavaScript function to temporarily disable CSS conversion" this article is shared here, I hope the above content can be of some help to you, so that you can learn more knowledge, if you think the article is good, you can share it out for more people to see it!

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.