Update default useTransitionEnd to true

[dirkgroenen]

I've been using this plugin in many projects and in almost every project the animations are much smoother when useTransitionEnd is on true. Especially when a jQuery .stop() is used.

[flexphperia]

It's not working for me: tested on Opera 12.16, Chrome 31, Firefox 26.
Transition end callback is never called when relaying on transitionend event.

[dirkgroenen]

The reason behind the change is because animations weren't finishing properly (when putting a .stop() in front if the transition). When usetransitionend was set to true they did work perfectly. About the callback; this one also ain't working here. I had to create a custom transitionEnd function.

[rstacruz]

The reason it isn't default is that there's almost no guarantee that it will consistently be used. For instance, .css({ left: 0 }).transition({ left: 0 }) will not trigger a transitionEnd event, although a Transit user will expect a callback to fire. I haven't found an easy way to detect if a transition will "not happen".

Any proposals on how to handle this?

[rstacruz]

Also, the next version (0.9.10) will fix transitionend not firing in certain browsers.

[flexphperia]

rstacruz,
are there any plans to introduce 0.9.10 version with transitionEnd support?
Now when plugin relays on timer there are issues that callback is called too early. The same when chaining two transitions, first one is finished too early and we have not smooth transition.

[rstacruz]

Hm, I think I'd like to have transitionEnd with a setTimeout fallback. The issue with transitionEnd is that it doesn't fire all the time (eg, .css({padding: 0}).transition({padding: 0})), so it's not a 100% reliable thing.

[flexphperia]

Yes I have tested it already, but you have also said that: "Also, the next version (0.9.10) will fix transitionend not firing in certain browsers."
About what browser you wrote?

[rstacruz]

Whatever uses transitionend (with no prefixes) — I think that'd be the latest Firefox and possibly Chrome/webkits.

[flexphperia]

I've tested all latest Firefox and Chrome browsers and in all everythings works fine when using transitionEnd. Can you confirm that I understood corectly problems may occur when for eg, .css({padding: 0}).transition({padding: 0}) but in other cases it should work fine?

[rstacruz]

Yes: so far that's the only case that persists in my testing.

[flexphperia]

I have found that in firefox and chrome sometimes when you transitioning Y,
transitionEnd event is called to early (about 100ms).
My solution was to use timer and transitionEnd event and dispatch callback
after one that is later called.
Now I dont have problems with too early callback when using timer only and
everything works nice.

Maybe plugin should check is transitioned property values are the same as
starting values, and manually dispatch callback?
22 cze 2014 17:49 "Rico Sta. Cruz" notifications@github.com napisał(a):

Yes: so far that's the only case that persists in my testing.

—
Reply to this email directly or view it on GitHub
#184 (comment)
.

[rstacruz]

Good call — definitely something to investigate for 1.0.0.

[troygrosfield]

Would be nice if the doc was updated to explain the use of the useTransitionEnd property. I spent many hours trying to figure out how to cancel callbacks from running not realizing all I needed to do was set this property to true.

Side note, thanks for the great lib @rstacruz! Hope support is continued and strong moving forward.

[milosdjakonovic]

It's worth noting that current versions of Chrome (confirmed for 42-45 on Windows ) have various issues firing transitionend, mainly regarding late firing.

You can see it here.