I am currently working on a Toast component for my Vue 3 application. I have a list of Toasts in the bottom right corner which are wrapped in a TransitionGroup that applies a sliding/opacity animation on enter and exit. The enter animation works as expected because the DOM automatically allocates space for the entering elements, but this will not work on exit because elements exit with position: absolute which removes their allocated space in the parent list. This results in exiting elements moving diagonally off the screen. Ideally I would like these elements to slide off the screen and maintain the same Y coordinates, while also smoothly transitioning the rest of the list.
I could fix this issue with a positive Y transform on exit - but this approach seems smelly to me. Any suggestions for fixing this issue? See the below Codepen.