React-spring: Can useTransition be used for single item mount/unmount animations?

[ooloth]

In 8.0, can useTransition be used for single item (non-array) mount/unmount transitions (e.g. when a modal/portal appears and disappears)?

If so, can you please provide an example of the useTransition syntax for toggling a single item? The only examples I could find in the new docs are for arrays of items with keys:

// From useTransition docs:

// How would this change if animating a single component rather than an array of items?
const transitions = useTransition(items, item => item.id, { 
  from: { opacity: 0 },
  enter: { opacity: 1 },
  leave: { opacity: 0 },
})

[bushblade]

I was a bit stuck on this earlier today coming from using Transition. I couldn't get useTransition to work for single component but useSpring worked well in it's place for me.

[drcmda]

yes, it can, i'll add this to docs later:

const [state, toggle] = useState(true)
const transitions = useTransition(state, null, { ... })

transitions.map(({ item, key, props }) => item && <animated.div key={key} style={props}> ...

[ooloth]

Thank you!

Congrats on the release btw. Hooks are sweet. ⚓

[zhammer]

typings on 8.0.2 seem to expect a different function signature for useTransition

Type error: Expected 1 arguments, but got 3.  TS2554

    16 | 
    17 | function FadeInFadeOut({ children, visible, fixedOnLeave = true }: FadeInFadeOutProps) {
  > 18 |   const transitions = useTransition(visible, null, {
       |                       ^
    19 |     from: { opacity: 0 },
    20 |     enter: { opacity: 1 },
    21 |     leave: { opacity: 0 }

from web.d.ts

export function useTransition<TItem, DS extends CSSProperties>(
  values: Merge<DS & CSSProperties, UseTransitionProps<TItem, DS>>
): UseTransitionResult<TItem, ForwardedProps<DS>>[] // result array is safe to modify
export function useTransition<TItem, DS extends object>(
  values: Merge<DS, UseTransitionProps<TItem, DS>>
): UseTransitionResult<TItem, AnimatedValue<ForwardedProps<DS>>>[] // result array is safe to modify

[zhammer]

nevermind: https://github.com/react-spring/react-spring/commit/1917317c7f2ee78bb389986d92287e552e5075e9

[drcmda]

i have updated docs today, should be a little clearer.

[ooloth]

Looks great! Thanks so much.

[lensbart]

When I follow the example in the docs, toggling one element works. However, when toggling quickly (showing the element again before the hide animation has been completed), two copies of the same element are briefly shown. If I understand correctly, this is due to useTransition keeping a copy of the element “alive” for as long as is needed to complete the hide animation.

Is there a way to inform useTransition that both toggle actions involved showing & hiding the exact same element? I tried passing several values as the second argument to useTransition: null, item => item.id, item => item, () => 1, etc; but none of that seems to work.

Is this the expected/desired behaviour? If not, any help would be greatly appreciated!