How to do it...

Using the base project, create a new project for this recipe called seamlesstransition and open the project folder. Now, follow these steps:

1. Open the App.vue file in the src folder. In the <style> section of the single file component, create a property called .rotate-enter-active,.rotate-leave-active and define the transition CSS style property as transform .8s ease-in-out;. Then, create a property called .rotate-enter,.rotate-leave-active and define the transform CSS style property as rotate( -180deg ); and transition as .8s ease-in-out;:

.rotate-enter-active,
.rotate-leave-active {
  transition: transform .8s ease-in-out;
}

.rotate-enter,
.rotate-leave-active {
  transform: rotate( -180deg );
  transition: transform .8s ease-in-out;
}

2. In the <template> section of the single file component, wrap the img HTML element with a Transition component. Then, define the name attribute as rotate and the mode attribute as out-in:

<transition
  name="rotate"
 ...