As we are going back and forth between pages, let's add some transitions to make it a bit cooler. Vue provides us with a transition wrapper component, allowing us to add entering or leaving transitions for any element or component. When an element is wrapped in a transition component, Vue will automatically check to see if the target element has CSS transitions or animations applied. And if it does, the CSS transition class will be added or removed at the appropriate timings.
view and add a transition tag. We don't need to import this component as we can use it directly in the template. We can use the name slide which will apply the transition of the CSS class slide. And let's add a mode of out in which means the current element transitions out first and when complete the new element transitions in.
Now let's add some CSS. We use the class name of slide as that is the name we have given our transition and we then use the classes that Vue provides us with EnterActive, LeaveActive, Enter and LeaveTo. There are six classes altogether but we only need these four for the transition to work. We use the CSS transition property to change the opacity and transform it with a time of one second.
We then make the opacity zero and we use the translate property. Feel free to play around with these values to better understand what they are doing. Let's see what it looks like. Pretty cool, right?
The pages are sliding in and out. Although I think this slide is a little too much. Let's try something different. Let's change the name of our transition from slide to move up and we can remove the mode.
Now let's add our move up classes. Here we can call an animation of fade in that runs for one second with an ease in effect. We then use keyframes to change the opacity and on leave we use the transform property to move the components up. Let's see what it looks like now.
Very cool! There are so many cool things we can do with root transitions. But for now we are just going to use a simple fade. Let's change the name of our transition from moveUp to fade.
Now let's add our fade classes. This is pretty simple. 3 seconds. Let's see what it looks like now.
Looks better right? If you're not convinced you can go back and use the slide or move up transition or just create your own cool transitions. As we are going back and forth between pages, let's add some transitions to make it a bit cooler. Vue provides us with a transition wrapper component, allowing us to add entering or leaving transitions for any element or component.
When an element is wrapped in a transition component, Vue will automatically check to see if the target element has CSS transitions or animations applied. And if it does, the CSS transition class will be added or removed at the appropriate timings. view and add a transition tag. We don't need to import this component as we can use it directly in the template.
We can use the name slide which will apply the transition of the CSS class slide. And let's add a mode of out in which means the current element transitions out first and when complete the new element transitions in. Now let's add some CSS. We use the class name of slide as that is the name we have given our transition and we then use the classes that Vue provides us with EnterActive, LeaveActive, Enter and LeaveTo.
There are six classes altogether but we only need these four for the transition to work. We use the CSS transition property to change the opacity and transform it with a time of one second. We then make the opacity zero and we use the translate property. Feel free to play around with these values to better understand what they are doing.
Let's see what it looks like. Pretty cool, right? The pages are sliding in and out. Although I think this slide is a little too much.
Let's try something different. Let's change the name of our transition from slide to move up and we can remove the mode. Now let's add our move up classes. Here we can call an animation of fade in that runs for one second with an ease in effect.
We then use keyframes to change the opacity and on leave we use the transform property to move the components up. Let's see what it looks like now. Very cool! There are so many cool things we can do with root transitions.
But for now we are just going to use a simple fade. Let's change the name of our transition from moveUp to fade. Now let's add our fade classes. This is pretty simple.
3 seconds. Let's see what it looks like now. Looks better right? If you're not convinced you can go back and use the slide or move up transition or just create your own cool transitions.