feat: add exitBeforeEnter prop to useTransition

[joshuaellis]

Why

This PR adds the exitBeforeEnter prop to the useTransition hook as requested here #1064. It also adds a new demo showcasing the new prop used with a SpringRef.

What

Adds the prop and splits the changes into exiting and not is exitBeforeEnter = true. This works very well when no SpringRef is passed to the useTransition hook.

The problem when using a ref is the ref parent component can't be flagged for re-render so the users API cannot call start to bring in the entering animation after the exiting has left. To solve this issue, we flag a forceChange when forceUpdate is called so instead of updating the queue of the passed ref, we instead run the animation straight away.

This is inline with how calling start works with the prop turned off, the animations overlap – leave. & enter happen at the same time. So I think this is an acceptable solution.

Also added a test for this feature.

Checklist

• Documentation updated
• Demo added
• Ready to be merged

[vercel]

This pull request is being automatically deployed with Vercel (learn more).
To see the status of your deployment, click below or on the icon next to each commit.

🔍 Inspect: https://vercel.com/pmndrs/react-spring-io/HqAnbst9t1aJyY9N3Q8Ya4RfeLCd
✅ Preview: https://react-spring-io-git-feat-exit-before-enter-pmndrs.vercel.app

[codesandbox-ci]

This pull request is automatically built and testable in CodeSandbox.

To see build info of the built libraries, click here or the icon next to each commit SHA.

Latest deployment of this branch, based on commit cde9a28:

Sandbox	Source
spring-animating-auto	Configuration
spring-card	Configuration
spring-cards-stack	Configuration
spring-chain	Configuration
spring-css-keyframes	Configuration
spring-draggable-list	Configuration
spring-exit-before-enter	Configuration
spring-flip-card	Configuration
spring-goo-blobs	Configuration
spring-image-fade	Configuration
spring-list-reordering	Configuration
spring-masonry	Configuration
spring-multistage-transition	Configuration
spring-notification-hub	Configuration
pmndrs/react-spring	Configuration
spring-notification-hub	Configuration
initial-rocket	Configuration
spring-simple-transition	Configuration
spring-svg-filter	Configuration
spring-slide	Configuration
spring-tree	Configuration
spring-viewpager	Configuration

[joshuaellis]

I'll write up the documentation when the PR is approved, just incase something needs editing for whatever reason.

[kindoflew]

Looks good to me! New demo looks great too.

I only had the one question in my comment and also there are a few commented out console.logs that I don't know if you want to keep in there.

[kindoflew]

should this be in the if (exitBeforeEnter) check below? It doesn't seem to be affecting the functionality in the demo or anything, but as far as I can tell, exitingTransitions doesn't get populated unless exitBeforeEnter === true (I also may be missing something though 😅 ).

[joshuaellis]

Good point. But if someone changes the prop we might still have it I think... so maybe we should be checking if t exists. Although according to MDN it just returns false if it didn't exist....

So it won't break, but maybe it's a more explicit thing to do?

ref: https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Map/delete

[kindoflew]

Thats a good point about changing the prop -- since later in the hook exitingTransition.current.size is used to check in the useLayoutEffect. I assume we'd want it to be empty no matter what then? And if it just returns false it won't affect anything else.

I think with that in mind it is kind of explicit -- "We want this removed when done, no matter what."

[joshuaellis]

Thanks for catching those rogue logs! I've removed them so going to move forward with this PR.