How do I normalize the CSS3 transition end events across browsers?

by

There’s a technique used in Modernizr, improved:

function transitionEndEventName () {
    var i,
        undefined,
        el = document.createElement('div'),
        transitions = {
            'transition':'transitionend',
            'OTransition':'otransitionend',  // oTransitionEnd in very old Opera
            'MozTransition':'transitionend',
            'WebkitTransition':'webkitTransitionEnd'
        };

    for (i in transitions) {
        if (transitions.hasOwnProperty(i) && el.style[i] !== undefined) {
            return transitions[i];
        }
    }

    //TODO: throw 'TransitionEnd event is not supported in this browser'; 
}

Then you can just call this function whenever you need the transition end event:

var transitionEnd = transitionEndEventName();
element.addEventListener(transitionEnd, theFunctionToInvoke, false);

More Related Contents:

  1. Callback on CSS transition
  2. CSS3 transition events
  3. How to use jQuery to wait for the end of CSS3 transitions?
  4. CSS transition doesn’t start/callback isn’t called
  5. How to make HTML element resizable using pure Javascript?
  6. Is there a callback on completion of a CSS3 animation?
  7. Prevent onmouseout when hovering child element of the parent absolute div WITHOUT jQuery
  8. Ignore mouse interaction on overlay image
  9. How do you Hover in ReactJS? – onMouseLeave not registered during fast hover over
  10. link element onload
  11. How to detect CSS3 resize events
  12. Detect CSS transitions using Javascript (and without modernizr)?
  13. How to window.scrollTo() with a smooth effect
  14. CSS transitions do not work when assigned trough JavaScript
  15. CSS Transition doesn’t work with top, bottom, left, right
  16. How to optimize website for touch devices
  17. Clean way to programmatically use CSS transitions from JS?
  18. How can I tell when a CSS background image has loaded? Is an event fired? [duplicate]
  19. Combination of animation and transition not working properly
  20. css transitions on new elements
  21. event.preventDefault() vs. return false
  22. How to autosize a textarea using Prototype?
  23. How to get a word under cursor using JavaScript?
  24. Determine if an element has a CSS class with jQuery
  25. Why write when the mime type is set by the server?
  26. CSS fade left to right
  27. JavaScript KeyCode Values are “undefined” in Internet Explorer 8
  28. Auto Mobile Site Redirect
  29. Are dynamically inserted tags meant to work?
  30. Display Spreadsheet Data to HTML Table

Leave a Comment