The Transition component has a special attribute called mode, where it is possible to define the behavior of the element's transition animation. This behavior will create a set of rules that controls how the animation steps will occur inside the Transition component. It's possible to use "in-out" or "out-in" mode in the component:
- In the "in-out" behavior, the new element transition will occur first, and when it's finished, the old element transition will start.
- In the "out-in" behavior, the old element transition will occur first, and then the new element transition will start.
In our case, we created an animation that rotates the Vue logo upside down. Then, to handle this seamless change, we used "out-in" mode so that the new element will only show up after the old one has finished the transition.