Transition Events about react-spring HOT 4 CLOSED

@AndreasFaust Each primitive can take in onRest and onFrame, the former triggers when the animation concludes, the latter triggers on every frame and gives you the current values. Keyframes are similar, internally they also just use these callbacks. The difference here is that keyframes can be awaited and chained, each promise yields the end-state values.

Try this:

console.log("start...")
return <Spring onFrame={v => console.log(v)} onRest={v => console.log("the end")} ...>

The start of the animation is yours anyway, since you are the one that triggers it by passing props to Spring.

As for transition, it has even deeper events:

<Transition
    keys={item => item.key}
    items={this.props.items}
    from={item => console.log(item, "starts"}
    enter={item => console.log(item, "enters"}
    leave={item => console.log(item, "leaves"}
    update={item => console.log(item, "updates"}
    onFrame={item, v => console.log(item, "animates to", v}
    onRest={item, v => console.log(item, "ends"} ...>

from react-spring.

Thank you very much for the quick reply!
I didn't know, that onFrame and onRest also apply to Transition. But how can I bind these events to certain Transition states only? I want to create a routing transition, where the next route is faded in, when the previous has faded out. For that I want to dispatch a redux action ("hasLeft") on "Transition leave rest" (and not "Transition enter rest"). To differ these states I could use the styles-property (if opacity === 0 for example), but that is not ideal. Or am I missing something?
I am asking, because in "React Move", I have been using in this case so far, these events exist.

from react-spring.

Actually i got that wrong myself, you're supposed to return the animation values in from/enter/leave/update, so that makes it possible to return individual values or listen to app state:

<Transition items={...} keys={...} from={...} enter={item => {
    if (this.props.something) return ({ opacity: item.opacity })
    else if (this.props.somethingElse) return ({ opacity: item.opacity / 2 })
    else return ({ color: 'red' })
}} ...>

Transition.onRest generally is limited when it's being used in transitions since they doesn't really have an end and a beginning (they just watch lifecycles). You can use it, but Transition itself uses onRest when the element leaves, so it will overwrite your handler in that case. Play around with it all for a while and look if it fulfills your usecase already, if not we can probably think of something to make it possible.

If you don't get any further, a very reduced codesandbox focussed on the problem at hand would be a good starting point.

from react-spring.

Thanks for explaining, you helped me a lot!
Have a nice weekend!

from react-spring.