javascript - Enabling vendor prefixes in CSS transitions make callback fires twice -

i'm implementing excellent solution (found here) use callback function a la jquery when using css transitions.

the problem if use vendor prefixes, chrome @ least binds 2 events: 1 webkittransitionend , second 1 transitionend and, of course, fires callback twice. here's piece of code:

jquery("#main").one('webkittransitionend otransitionend otransitionend mstransitionend transitionend', function(e) {   console.log("poum!"); }); 

am doing wrong?

you're not doing wrong. chrome uses both prefixed , un-prefixed versions.

there couple options:

1. using outside variable.

   var fired = false; jquery("#main").one('webkittransitionend otransitionend otransitionend mstransitionend transitionend', function(e) {     if ( ! fired ) {         fired = true;         console.log("poum!");     } }); 

2. using kind of detection single variable transitionend (the below uses modernizr, , taken documentation):

   var transitionend = (function(transition) {      var transendeventnames = {          'webkittransition' : 'webkittransitionend',// saf 6, android browser          'moztransition'    : 'transitionend',      // ff < 15          'transition'       : 'transitionend'       // ie10, opera, chrome, ff 15+, saf 7+     };      return transendeventnames[transition]; })(modernizr.prefixed('transition'));  // jquery("#main").one(transitionend, function(e) {     console.log("poum!"); }); 

note:

safari 6 seems trigger onload set in css. so, if have (assuming prefixes)

#main {     width: 40px;     height: 40px;     transition: 200ms; } 

safari trigger transitionend width , height on load. there couple ways around this:

• use more specific transition-property (but if set in css, still trigger)

• do following in javascript (it's not prettiest thing, should take care of edge case , still works in chrome) fiddle

  var transitionproperty = 'background-color',     startcolor = jquery("#main").on(transitionend, function(e) {         var el = $(this);         if ( transitionproperty === e.originalevent.propertyname && el.css(transitionproperty) !== startcolor ) {             console.log("poum!");             // make happen once.             $(this).off(transitionend);         }     }).css(transitionproperty);