[Vuejs]-Vue transition, not rolling as intended without mode="out-in"

I realised what it was. It’s because the element is actually appearing alongside the leaving element, but because of its positioning, it appears underneath.

https://codesandbox.io/s/ykqq6oov6j

To solve it, you need to apply position: absolute to the transitioning components