Delay and trail conflict on useTransition (v9.0.0-rc3)

[leinelissen]

Hi there! I ran into an issue while creating a multi-stage transition using react-spring.

🐛 Bug Report

As soon as a delay is placed as a property somewhere in the transition, any trail is immediately disregarded.

To Reproduce

See this CodeSandbox: https://codesandbox.io/s/dank-leftpad-hyvle?file=/src/App.js
If a delay is present on any of from, enter or leave, any value of trail is disregarded. As soon as all mentions of delay are removed, the trail shows up as normal.

Expected behavior

I would expect that a delay and trail could be combined, where a delay precedes the staggered set of items following the trail. The typescript annotations show that both trail and delay can be part of the global config, as well as the individual stages, so I figured this should have been a valid combination. If it is not, that is okay too.

Link to repro (highly encouraged)

https://codesandbox.io/s/dank-leftpad-hyvle?file=/src/App.js

Environment

• react-spring v9.0.0-rc3
• react v16.12.0

Thanks for making something awesome!

[joshuaellis]

So after a bit of initial investigation, I can see we're creating our trail here:

react-spring/packages/core/src/hooks/useTransition.tsx

Line 208 in 9568020

delay: (delay += trail),

but how delay is handled is the the animation is paused:

react-spring/packages/core/src/scheduleProps.ts

Line 57 in 9568020

delay = callProp(props.delay || 0, key)

So I can only assume that the trailing time calc think it'll only start a trail at time 0, when in this case it could start at time x.
It could be as simple as adding props.delay in useTransition or a bit more than that. But I thought i'd write my initial thoughts here as a record (so I don't forget myself).

[joshuaellis]

So there also seems to be a bit of confusion, we currently don't allow delay or trail to be in the phase styles object, e.g. enter. So currently you can't have different trails and delays for entering a leaving. It could be an enhancement we add, but I haven't heard of a valid use-case for it yet...

[joshuaellis]

This has been released on v9.2.0-beta.4