The issue involves cleanup behavior during unmount with ViewTransition API which requires careful timing handling.
The problem is that `onExit` cleanup functions are not called immediately on unmount when using ViewTransition, unlike `onEnter` cleanup. This requires modifying the unmount behavior to ensure cleanup consistency. The main challenge is handling the timing correctly with the View Transitions API.
Noticed this while writing docs:
<ViewTransition
onEnter={(instance) => {
const anim = instance.new.animate(/* ... */);
return () => {
anim.cancel();
};
}}
onExit={(instance) => {
const anim = instance.new.animate(/* ... */);
return () => {
anim.cancel();
};
}}
>
{/* ... */}
</ViewTransition>
If you have a pendingonEnter animation and the tree is unmounted, the onEnter cleanup is called immediately.
But if you have a pending onExit and the tree is unmounted, the onExit cleanup isn't called until the animation completes.
This means you can't cancel the animation:
https://github.com/user-attachments/assets/f522f746-5ed3-432f-acbf-d610ab4260d2
Claim this issue to let others know you're working on it. You'll earn 20 points when you complete it!