How for an animated element to disable animation once for a momentary change of style?
-
I mean, there are changes that should occur with animation, and there are those that change the same parameters, but should occur instantly. I tried to do that, but it doesn't work:
var div = document.getElementById('div'), width = 10;
function inc() {
width += 10;
if (width > 100) width = 10;
div.style.width = width + '%';
}document.getElementById('ba').addEventListener('click', inc);
document.getElementById('bna').addEventListener('click', function() {
div.classList.add('no-animation');
inc();
div.classList.remove('no-animation');
});.animated-div {
margin-top: 10px;
width: 10%;
height: 30px;
background: #448;-webkit-transition: width 0.5s; -moz-transition: width 0.5s; -o-transition: width 0.5s; transition: width 0.5s;
}
.no-animation {
-webkit-transition: none !important;
-moz-transition: none !important;
-o-transition: none !important;
transition: none !important;
}<input type="button" id="ba" value="Animation"/><input type="button" id="bna" value="No animation"/>
<div class="animated-div" id="div"></div>
-
Such behavior, in my view, is very invisible. The point is, all the CSS rules are clashed at some point and your change.
no-animation
fails to enter into force. Such behaviour is understandable and, in most cases, it does not interfere.In this case, forced Transferring CSS before Class removal
no-animation
♪ You can do that. http://gent.ilcore.com/2011/03/how-not-to-trigger-layout-in-webkit.html But most often, it's easy to turn to the field.offsetHeight
element.The address to this field leads CSS to update and apply new rules to DOM elements.
Edited version of the codeAdded one line
var div = document.getElementById('div'), width = 10;
function inc() {
width += 10;
if (width > 100) width = 10;
div.style.width = width + '%';
}document.getElementById('ba').addEventListener('click', inc);
document.getElementById('bna').addEventListener('click', function() {
div.classList.add('no-animation');
inc();
div.offsetHeight; // Вот эта строка творит 'магию'!
div.classList.remove('no-animation');
});.animated-div {
margin-top: 10px;
width: 10%;
height: 30px;
background: #448;-webkit-transition: width 0.5s; -moz-transition: width 0.5s; -o-transition: width 0.5s; transition: width 0.5s;
}
.no-animation {
-webkit-transition: none !important;
-moz-transition: none !important;
-o-transition: none !important;
transition: none !important;
}<input type="button" id="ba" value="Animation"/><input type="button" id="bna" value="No animation"/>
<div class="animated-div" id="div"></div>