exhtml
9/8/2017 - 9:54 AM

Detectar cuando acaba la transition - transitionEnd / animationEnd https://jonsuh.com/blog/detect-the-end-of-css-animations-and-transitions-

Detectar cuando acaba la transition - transitionEnd / animationEnd https://jonsuh.com/blog/detect-the-end-of-css-animations-and-transitions-with-javascript/ http://www.javascriptkit.com/dhtmltutors/css3-transitions-and-jquery2.shtml pen: https://codepen.io/anon/pen/QMXQPo?editors=1001

which-transition-event.js
content_copyfile_download
//
// Detect which transition event uses the browser
// http://davidwalsh.name/css-animation-callback
//

function whichTransitionEvent(){
    var t,
        el = document.createElement("fakeelement");
  
    var transitions = {
      "transition"      : "transitionend",
      "OTransition"     : "oTransitionEnd",
      "MozTransition"   : "transitionend",
      "WebkitTransition": "webkitTransitionEnd"
    }
  
    for (t in transitions){
      if (el.style[t] !== undefined){
        return transitions[t];
      }
    }
  }
  
var transitionEvent = whichTransitionEvent();
transition-end.html
content_copyfile_download

<style>
/* OJO LA CLAVE ESTÁ EN QUE TODOS LOS STATES TIENEN QUE TENER UN TRANSITION DURATION */
    .frubox { width: 100px; height:50px; background: lightskyblue; transition: 1s;}
    .fru { width: 50px; background: yellow; transition: 2s;}
    .frucor { width: 300px; background: pink; transition: 2s;}
</style>

<input type="checkbox" id="toggle">

<div class="frubox fru"></div>

<script>

    $('#toggle').on('change', function(){
        
        //console.log('transitionEvent: ', transitionEvent); //transitionend

        if(this.checked){
            $('.frubox').removeClass('fru').addClass('frucor').one(transitionEvent, function(e) {
                    
                console.log('end add');

            });
            
        } else {
            $('.frubox').removeClass('frucor').addClass('fru').one(transitionEvent, function(e) {
            
                console.log('end remove ');

            });
        }

    });

</script>