React-spring: delay option doesn't work in useTransition

[b00sta]

I have several components with useTransition hook and want to delay transition between them using delay, but it doesn't work. Simple test here: https://codesandbox.io/s/2w6j5566mp

[drcmda]

delay isn't allowed for transitions, the prop doesn't exist. they can trail but trail starts for the second item and then accumulates for the other.

The problem is, what exactly does delay: 3000 mean. a transition goes through a myriad of state changes, for instance updates, enter, leave, initial, etc. if i allow delay, are you ok with any of these being delayed? I think it wouldn't be what you want.

You can delay all primitives with useChain, though.

[jascodes]

Hey @drcmda
"I think it wouldn't be what you want" - Thats what hitler said :stuck_out_tongue_closed_eyes:
Jokes aside..
I think more important is to allow full seprate spring configs for enter(initial too which's entering first time),leave. Let both run in parallel and when all are done transition is done. Just like Promise.all

Delay at transition level means after item(s) updates neither enter or exit happens for period of time; but can skip duration at config level since overall duration will be based on config of enter or leave.

I think its more intutive. What do you think?

[b00sta]

@drcmda. I would like the delay to be used to enter and exit phase. I use grid for the layout components, and I also need to set position: absolute for each element of the grid so that the transitions will look good. But the grid does not work with absolutely positioned elements. So in this case, I need to use a transition within each component and I need to trail every transition. I used Transition before with delay option in config, and found in docs that useTransition has all shared config options too. Have you any suggestion to me?

[drcmda]

and something like this won't be better? https://codesandbox.io/embed/2v716k56pr

refs delay the entire component, but once it's started it functions normal again. to do this with a single delay prop seems not possible to me.

[jascodes]

@drcmda Awesome.. and yeah this works too... and I have tried chaining couple of times always had weird duration issue, must been something by me.. this time works like charm :smiley:

8x looking good; thx for all the time put in
Cheers :beer:

[garrettmaring]

I believe this can be accomplished with using the functional syntax.

const transitions = useTransition(show, null, {
  from: { opacity: 0 },
  enter: item => async (next, cancel) => {
    await new Promise(resolve => setTimeout(resolve, 1000));
    await next({ opacity: 1 })
  },
  leave: { opacity: 0 },
});

[aleclarson]

@garrettmaring In v9, you can use delay in the enter, leave, and update objects.

const transition = useTransition(show, {
  from: { opacity: 0 },
  enter: { opacity: 1, delay: 1000 },
  leave: { opacity: 0 },
});

(See here for breaking changes to useTransition in v9)

[garrettmaring]

Ah, very cool. Thank you @aleclarson!

[peterwiebe]

FYI just tested @aleclarson's solution with v9.0.0-rc3 and it seems that useTransition doesn't work any more. Example of working delay transition -> https://codesandbox.io/s/react-spring-900-rc3-usetransitions-p6u2g

[aleclarson]

@peterwiebe Thanks, I've updated the comment with the latest syntax 👍