chenglou / react-tween-state

React animation.

Geek Repo:Geek Repo

Github PK Tool:Github PK Tool

onEnd callback fires way too soon.

benoneal opened this issue · comments

The onEnd callback fires way before the actual tween end. This is really obvious when you set a duration around > 2 seconds, the callback seems to fire almost instantly. Adding any delay also makes no difference to when this callback fires.

Ehm, I can't repro this. Can you provide a code snippet?

(Btw, don't forget that in additive animation, the animation actually never gets interrupted, so you might have attributed a previous callback to the wrong tween.)

http://jsbin.com/tekuluve/1/edit

This example isn't isolated (sorry), but if you click on any of the red boxes, you'll see that the box is removed before it's opacity reaches 0. This is all handled in the box component's fadeOut method (which is called in componentWillReceiveProps, and being passed the onUnmount method from the parent Grid component... again, sorry that it isn't an isolated test case [I'm trying to build a component mounting / unmounting handler which allows for passing in of dynamic props when unmounting and calculating properties from the DOM when mounting]).

It's possible that this may actually be an issue with the easing though.

Lol, you have the .box css transition also on for some reason. Comment that out and it'll work just fine.

Yeah, you don't wanna have css transition trying to keep up every frame while you rAF tweenState. Double tweening? Doesn't make sense =).

Closing!

Ah true. That was there from before I even added your tween-state, and I didn't even think it could be a css issue. Doh! Carry on being awesome.