react-spring icon indicating copy to clipboard operation
react-spring copied to clipboard

Support promises and animated values for "expires" prop of v9 useTransition

Open aleclarson opened this issue 5 years ago • 0 comments

Feature proposal for the new expires prop:

  1. pass in a single animated value, or an array of animated values, so unmount will wait for these additional animated value(s) to rest, or if they're already at rest.
  2. pass in a single Promise, or an array of Promises, so unmount will wait for the Promises to resolve.

A real-world use case for (1) above is when animating an interactive chart. Use a Spring value to animate the chart's x/y axis, while useTransition to manage the enter/leave/update of elements on the chart.

// Pass the animated value `x` to the `expires` prop of transition,
// so that the unmount event can wait for the X-axis animation to rest,
// instead of in the middle of X-axis animation.
const [{ x }, setAxis] = useSpring(() => { x: 100 });
const transition = useTransition(elements, { ...props, expires: [x] });

Originally posted by @guopengliang in https://github.com/react-spring/react-spring/pull/809#issuecomment-530700055

aleclarson avatar Nov 27 '19 01:11 aleclarson