prepareTransition icon indicating copy to clipboard operation
prepareTransition copied to clipboard

Transition end events firing more than once and on multiple properties

Open superelement opened this issue 10 years ago • 1 comments

I had a few of issues here:

  • In Chrome I noticed that both "webkitTransitionEnd" and "transitionend" events were being triggered. This isn't so much of an issue when you're using $.one, but when I needed to change it to $.on it became a problem.
  • Changed $.one to $.on because I had multiple transitions getting triggered on my element (I think from child elements bubbling up) and the event handler would only capture the first one. So to get around this, I used the boolean variable evtFired to only allow 1 valid call and gave the plugin an option to pass in the property you want to listen for. If this property, however, was transform I then had to add the utility function getTransformName() to check the JS name that the browser uses (eg "webkitTransform" or just "transform") in order to compare evt.originalEvent.propertyName.
  • Additionally, added a feature detection function for transition called "supportsTransitions()" so that the plugin gives the target element a class to hook into called hasnt-transition, just in case addition styles are needed in that scenario. Also completely omits the is-transitioning class, as it is not needed.

superelement avatar Aug 13 '15 08:08 superelement

Could you pull the gulp/npm stuff out into its own PR? I'm still reviewing the rest of the PR and wondering if there's a simpler way to approach it. Also, msTransitionEnd could/should be added.

snookca avatar Aug 15 '15 21:08 snookca