search

chenglou / react-tween-state

React animation.
Other
1.74k stars 70 forks source link

onEnd callback fires way too soon. #7

Closed benoneal closed 10 years ago

benoneal commented 10 years ago

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.

chenglou commented 10 years ago

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.)

benoneal commented 10 years ago

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.

chenglou commented 10 years ago

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!

benoneal commented 10 years ago

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.