There is a plug-in with dynamic windows, when you close it, CSS3 animation is played out and ... they need to be killed, the code looks something like this:

$confirm.addClass('hide'); $confirm.remove();

The problem is that the window immediately disappears and disappears, how to let the code know that it is necessary to remove an element after it disappears? I used to do the usual .fadeOut , but now the animation has become more complicated than a smooth fade.

    2 answers 2

    An example of completion of the css transition.

    List of all events https://developer.mozilla.org/en-US/docs/Web/Events

    Source http://blog.teamtreehouse.com/using-jquery-to-detect-when-css3-animations-and-transitions-end

     var myButton = $('#button'), myBox = $('#box'); myButton.click(function() { myBox.addClass('change-size'); myBox.one('webkitAnimationEnd oanimationend msAnimationEnd animationend', function(e) { $('#msg').append('<p>Animation complete</p>'); myBox.removeClass('change-size'); }); }); 
     body { font-size: 20px; font-family: Arial, sans-serif; } .button { width: 100px; height: 100px; background: blue; color: white; line-height: 100px; text-align: center; cursor: pointer; } .box { width: 100px; height: 100px; background: hotpink; } @keyframes growBox { to { width: 300px; height: 200px; } } .change-size { animation: growBox 3s linear 0s 1 normal; } 
     <!DOCTYPE html> <html> <head> <script src="http://cdnjs.cloudflare.com/ajax/libs/prefixfree/1.0.6/prefixfree.min.js"></script> <script src="http://code.jquery.com/jquery-1.8.2.min.js"></script> <meta charset=utf-8 /> <title>JS Bin</title> </head> <body> <div id="button" class="button"> <p>Click Me</p> </div> <div id="box" class="box"> </div> <div id="msg"></div> </body> </html>

    • And if the browser does not support animations? Will the event work? - Fangog

    I also like to use CSS animations, not JS, but in such cases you have to constantly crutches, small or large. I know two ways to solve the problem. Usually, I use the first, because of its simplicity and speed of implementation. Although, of course, the second is more flexible and reliable.

    1 - Simple and trite hardcode. If I make a CSS-animation of the disappearance of an element with a duration of 600ms, I postpone the deletion of an element in a timeout for an appropriate time. So in your case:

     $confirm.addClass('hide'); setTimeout(function(){ $confirm.remove(); },600)

    The problem is that time is set in two unrelated places. If you (or another prog after you) change the duration of the CSS-animation, for example, it is logical that this is enough - get an unexpected result.

    2 - hang up on the element a listener of the event "transitionend" and perform actions at the end of the animation. The dependence on time is no longer and there is flexibility. But, in the case of two-way animation (as in the example, when an element can be at the end of the animation both on the left and on the right), you should also check the state of the element inside the callback in order to understand whether we are turned on or turned off.
    Working example: https://jsfiddle.net/ipshenicyn/1xz9by4o/ Example of use:

     $("#id").on('webkitTransitionEnd otransitionend oTransitionEnd msTransitionEnd transitionend', function(e){ //do semething })