Delay before enter phase

[ErAz7]

What would you like improved? It can be handy to add new phases like before-enter and before-exit and a delay feature. the idea is to have a delay before applying enter and exit phases when a component mounts or unmounts. this can be very helpful in cases like react router when you want do something before page transition happens. However this feature can be implemented with existing capabilities but it worth adding this feature inside package to make it more perfect

[silvenon]

There have been multiple requests to implement delay functionality (e.g. #411), but IMO lacking good or complete use cases, so it would really help if you could build yours in CodeSandbox 🙏E.g. when you say "do something before page transtion", what exactly?

[blahBlahhhJ]

I think one example is: When doing fading page transitions from page A to page B, CSSTransition is doing the fade-out for A and fade-in for B at the same time. It would be good if I can set B to fade-in after A has faded-out.

[JulsRicketti]

Looks like this thread has gone stale and it seems like nothing has come from it or the previous one.

Suppose will try my luck and reviving it, since it's an issue I'm also having and a setTimeout is still a bit complicated. For me specifically it would be during route changes. I would like to animate the exit of route 1, but route 2 appears before it and covers it, so instead of getting that smooth transition out and in, one of them will always be abrupt. This is specially bad if the two route pages have different background colors, overlays or buttons with absolute or fixed positioning.

It quickly becomes a bit of a CSS nightmare trying to delay X, Y or Z from page 1 or 2, but then if you go from 2 to 1 it is completely screwed up. Are there any alternative solutions of getting around this?

I'll try to attach a sandbox of these examples at some point this week.

[chasebank]

E.g. when you say "do something before page transition", what exactly?

In my case, simply get some information about the current state, before enter. I'm coming from Vue, so apologies for my naivety. I'm sure there's multiple Reacty ways of achieving this, but I've found it difficult thus far.

I'm looking for a behavior similar to Vue's before-enter hook. Namely to get some dimensional data to implement a normal FLIP transition.

Simply delaying enter strikes me as a possible solution. But I'd hope there's a better way?