How to use the JavaScript function to temporarily disable CSS conversion
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!
