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-animationfails 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>




Suggested Topics

  • 2
  • 2
  • 2
  • 2
  • 2
  • 2
  • 2
  • 2
  • 2
  • 2
  • 2
  • 2
  • 2
  • 2
  • 2