prepareTransition
prepareTransition copied to clipboard
Transition end events firing more than once and on multiple properties
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$.onit became a problem. - Changed
$.oneto$.onbecause 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 variableevtFiredto 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, wastransformI then had to add the utility functiongetTransformName()to check the JS name that the browser uses (eg "webkitTransform" or just "transform") in order to compareevt.originalEvent.propertyName. - Additionally, added a feature detection function for
transitioncalled "supportsTransitions()" so that the plugin gives the target element a class to hook into calledhasnt-transition, just in case addition styles are needed in that scenario. Also completely omits theis-transitioningclass, as it is not needed.
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.