Featured resource
pluralsight tech forecast
2025 Tech Forecast

Which technologies will dominate in 2025? And what skills do you need to keep up?

Check it out
Hamburger Icon
  • Labs icon Lab
  • Core Tech
Labs

Guided: Creating a Vue 3 Animation Using CSS Transitions

Dive into Vue 3 animations! Learn the essentials of crafting eye-catching animations to enhance user experience. This Guided Code Lab covers Vue 3's animation system, exploring its built-in <transition> component.

Labs

Path Info

Level
Clock icon Intermediate
Duration
Clock icon 13m
Published
Clock icon Jan 24, 2024

Contact sales

By filling out this form and clicking submit, you acknowledge our privacy policy.

Table of Contents

  1. Challenge

    Introduction

    In this Vue guided lab, you have been given a demo app called Globomantics Doc Tracker. Launching the app will display a short list of documents that have an expiration date (i.e., passports, driver licenses, ID cards, etc.). Your task in this lab is to make the app visually more appealing by adding animations.

    Animations are a way to make your application's UI more appealing, and capture the user's attention. Animations are also great for making a long-lasting, profound, and positive impact on your users.

    The idea is not to animate everything within your application, but just the parts that are essential for the user to have a positive experience when using the application.

    The guided steps in this lab will review most of the topics related to implementing transitions and animations using Vue 3. Tasks can be validated by clicking the checkboxes next to them.

    If you are stuck or would like to compare solutions, a solution directory has been provided for you. Within the solution directory, you'll find a subfolder for every task. For example, the solution to Task 2 can be found under solution/task02 file.

    You can launch the app at any time during the lab by doing the following:

    1. Click the Run button at the bottom right of the Terminal tab to run the npm run dev command.

    2. View the web page by clicking on the internal Web Browser tab, and then use the arrow icon (Open in new browser tab) in the browser to open the web application in a new tab.

    info> Important:
    - By default, the app uses port 3000. If for some reason, the app doesn't run, it could be that port 3000 might be taken by another process. In that case, you may run the fuser 3000/tcp --kill command in the Terminal to free up port 3000, and then run the app again.
    - Within the FILETREE you can find the project files. The Run.txt file contains the commands to reset port 3000 and run the app using the Terminal.

  2. Challenge

    Adding a Transition

    A transition is nothing more than a Vue component that can be wrapped around another component, allowing the "wrapped up" component to become animated.

    Imagine you have the following:

    <div>
    ...
    </div>
    

    You can easily animate the above code in Vue by wrapping the transition component around it and giving it a name, for example animated:

    <transition name="animated" appear>
     <div>
     ...
     </div>
    </transition>	
    

    Take a look at the Home.vue file found in the code editor to your right and complete the following task. In the next steps, you'll bring this transition to life by adding the CSS animation classes.

  3. Challenge

    Entry Transitions

    Wrapping the component that you want to animate around a Vue transition component is the first step of creating an animation with Vue.

    Now, you need to add an animation class to the transition component you just added.

    Given that the transition's component name is b, in other words:

    <transition name="b">...</transition>
    

    In this step. you will create different CSS classes that you can add to the style section of the Home.vue file found within the src/views folder, as follows:

    <style>
     << CSS classes go here >>
    </style>
    
    CSS Class: b-enter-from

    This CSS class will create the animation when the transition component "enters from" a non-animated state and later transitions to an animated state. You can think this CSS class as the style that will be applied to the transition component at the beginning of the animation.

    The CSS class needs to begin with the same name as the transition component, followed by the animation event (enter-from), so in this case: b-enter-from.

    This CSS class will contains two properties: opacity and transform. The value of opacity should begin with 0 and the value of transform indicates the actual type of animation that you'll perform. In this case, you want to create a vertical animation movement.

    To create a vertical animation movement, you can use translateY and pass the number of pixels that you want the animation to move.

    Having said this, your animation class should look something like this:

    .b-enter-from {
     opacity: 0;
     transform: translateY(10px);
    }
    

    This is an important and crucial step in the animation process, because it describes what the animation's initial state will be. ###### CSS Class: b-enter-to

    This CSS class will create the animation when the transition component "enters to" an animated state. You can think this CSS class as the style that will be applied to the transition component at the end of the animation.

    The CSS class needs to begin with the same name as the transition component, followed by the animation event (enter-to), so in this case: b-enter-to.

    This CSS class will contain two properties: opacity and transform. The value of opacity should be 1 and the value of transform indicates the actual type of animation that you'll perform. In this case, you want to create a vertical animation movement.

    To create a vertical animation movement, you can use translateY and pass the number of pixels that you want the animation to move, from its initial position (10) to its final position (0).

    Having said this, you animation class should look something like this:

    .b-enter-to {
     opacity: << The opacity value goes here >>
     transform: translateY(<< The final position goes here >>);
    }
    

    This is an important and crucial step in the animation process, because it describes what the animation's final state will be.

    Remember that the animation began with the following state:

    .b-enter-from {
     opacity: 0;
     transform: translateY(10px);
    }
    ``` Now that you have added the ```.b-enter-from``` and ```.b-enter-to``` classes to the ```<styles>...</styles>``` section of the ```src/views/Home.vue``` file, you need to indicate what type of animation you want ```<transition name="b">...</transition>``` to have.
    
    To do that, you need to add a ```.b-enter-active``` class to the ```<styles>...</styles>``` section of the ```Home.vue``` file.
    
    ###### CSS Class: `b-enter-active`
    
    This class only requires a single property called ```transition``` which describes three things:
    
    * a) That it applies to `all` elements within the ```<transition name="b">...</transition>``` component.
    * b) That it will take 1.5 seconds (```1.5s```) to execute. 
    * c) That it will appear as "easing-in" place (```ease-in```).
    
    It's important to know that you may use other values for the duration of animations in Vue, besides 1.5 seconds (```1.5s```). This specific value is just for this animation example.
    
    Besides, the ```ease-in``` option, the ```ease-out```, and ```ease``` options are also available. This specific ``ease-in``` option is just for this animation example.
    
    This property should be described as a one-liner property as follows:
    
    ```vue
    transition: a) b) c)
    

    You will add the .b-enter-active class after the .b-enter-to class. Make sure you add the transition property to it as follows:

    .b-enter-active {
     transition: a) b) c)
    }
    

    This step is equally important because it is here that you specify what happens between the animation's initial state and the animation's final state. So this step is where you actually define what the animation does. This is the animation!

    Obviously, you must replace the values of a), b), and c). By the end of this step, if you execute the app, you should see that the input section now has a "sliding-in" animation.

  4. Challenge

    Exit Transitions

    Given that the transition's component name is b, in other words:

    <transition name="b">...</transition>
    

    You will need to create other CSS classes that you can add to the style section of the Home.vue file.

    CSS Class: b-leave-from

    This CSS class will create the animation when the when the transition component "leaves from" an animated state to an non-animated state. You can think this CSS class as the style that will be applied to the transition component before the components starts to exit its animated state.

    The CSS class needs to begin with the same name as the transition component, followed by the animation event (leave-from), so in this case: b-leave-from.

    This CSS class will contains two properties: opacity and transform. The value of opacity should be 1 and the value of transform indicates the actual type of animation that you'll perform. In this case, you want to create a vertical animation movement.

    To create a vertical animation movement, you can use translateY starting at this position: (0).

    Having said this, your animation class should look something like the following:

    .b-leave-from {
     opacity: << The opacity value goes here >>
     transform: translateY(<< The position goes here >>);
    }
    

    Remember that the animation now has the following state:

    .b-enter-to {
     opacity: 1;
     transform: translateY(0);
    }
    
    .b-enter-active {
     transition: all 1.5s ease-in;
    }
    

    You need to move away from the current state, starting from the current state. In other words, .b-leave-from should behave like .b-enter-to. ###### CSS Class: b-leave-to

    This CSS class will create the animation when the when the transition component "leaves to" a non-animated state, from an animated state. You can think this CSS class as the style that will be applied to the transition component when the animation finishes.

    The CSS class needs to begin with the same name as the transition component, followed by the animation event (leave-to), so in this case: b-leave-to.

    This CSS class will contains two properties: opacity and transform. The value of opacity should begin with 0 and the value of transform indicates the actual type of animation that we'll perform. In this case, you want to create a vertical animation movement.

    To create a vertical animation movement, you can use translateY and pass the number of pixels that you want the animation to move.

    Having said this, your animation class should look something like the following:

    .b-leave-to {
     opacity: 0;
     transform: translateY(10px);
    }
    ``` Now that you have added the ```.b-leave-from``` and ```.b-leave-to``` classes to the ```<styles>...</styles>``` section of the ```src/views/Home.vue``` file, you need to indicate what type of animation you want ```<transition name="b">...</transition>``` to have.
    
    To do that, you need to add a ```.b-leave-active``` class to the ```<styles>...</styles>``` section of the ```src/views/Home.vue``` file.
    
    ###### CSS Class: `b-leave-active`
    
    This class only requires a single property called ```transition``` which describes three things:
    
    * a) That it applies to `all` elements within the ```<transition name="b">...</transition>``` component.
    * b) That it will take 1.5 seconds (```1.5s```) to execute.
    * c) That it will appear as "easing-in" place (```ease-in```).
    
    This property should be described as a one-liner property as follows:
    
    ```vue
    transition: a) b) c)
    

    You will need to add the .b-leave-active class after the .b-leave-to class. Make sure you add the transition property to it as follows:

    .b-leave-active {
     transition: a) b) c)
    }
    

    Obviously, you must replace the values of a) b) and c). By the end of this step, if you execute the app, you should see that the input section now has a "sliding-out" animation.

  5. Challenge

    Entry and Exit Transition Combinations

    Transition Combinations: b-enter-to + b-leave-from

    You may have noticed in the previous steps and tasks that some classes, although they have different names, actually do the same thing. For example, b-enter-to and b-leave-from have the same properties:

    .b-enter-to {
     opacity: 1;
     transform: translateY(0);
    }
    
    .b-leave-from {
     opacity: 1;
     transform: translateY(0);
    }
    

    So you may be wondering, why not combine them together instead of duplicating this logic? Well, that's exactly what this task is about! ###### Transition Combinations: b-enter-from + b-leave-to

    You may have noticed in the previous steps and tasks that some classes, although they have different names, actually do the same thing. For example, b-enter-from and b-leave-to have the same properties:

    .b-enter-from {
     opacity: 0;
     transform: translateY(10px);
    }
    
    .b-leave-to {
     opacity: 0;
     transform: translateY(10px);
    }
    

    So you may be wondering, why not combine them together instead of duplicating this logic? Well, that's exactly what this task is about! ###### Transition Combinations: b-enter-active + b-leave-active

    You may have noticed in the previous steps and tasks that some classes, although they have different names, actually do the same thing. For example, b-enter-active and b-leave-active have the same properties:

    .b-enter-active {
     transition: all 1.5s ease-in;
    }
    
    .b-leave-active {
     transition: all 1.5s ease-in;
    }
    

    So you may be wondering, why not combine them together instead of duplicating this logic? Well, that's exactly what this task is about! By the end of this step, if you execute the app, you should see that the input section now has "sliding-in" and "sliding-out" animations.

  6. Challenge

    Animated Notification

    The next thing you are going to do is animate the notification message that appears when you click on the Add document button and you haven't entered any details.

    To get you started, open the src/views/Home.vue file and place the following classes within the <styles>...</styles> section:

    .notification-leave-to {
      opacity: 0;
      transform: translateY(-80px);
    }
    .notification-leave-from {
      opacity: 1;
      transform: translateY(0);
    }
    .notification-enter-active {
      animation: shake 0.8s ease;
    }
    .notification-leave-active {
      transition: all 0.5s ease;
    }
    

    The reason you need to copy these classes and paste them into the <styles>...</styles> section of the src/views/Home.vue file is because you've covered what these classes do in the previous tasks. The only difference, is that the transition's name is now notification.

    Next you need to wrap the <Notification v-if="showNotification" /> component around a transition, as follows:

    <transition name="notification">
     <Notification v-if="showNotification" />
    </transition>
    

    info> Note: You can also open solution/task13/Home.vue and just copy the contents of this file and overwrite the contents of src/views/Home.vue, if that's easier.

    You'll notice in the code you copied from above that the .notification-enter-active class uses the shake effect:

    .notification-enter-active {
     animation: shake 0.8s ease;
    }
    

    The shake effect is what you'll use to give the Notification component a unique shaking animation in the next step.

  7. Challenge

    Shake Animation

    Initial Shake

    In order to create the shaking effect, you have to create a @keyframes shake { ... } class within the <style>...</style> section of the src/views/Home.vue file.

    This can be done as follows:

    @keyframes shake {
      0% { transform: translateY(-40px); opacity: 0; }
      ...
      100% { transform: translateX(0); }
    }
    

    The shake effect is created by going from 0% to 100%, where each step includes a transform animation.

    Initially, you want to indicate what happens when you reach 45% and 55%, which is what you will complete in this next task.

    Just to be clear, the initial shake is more like a vertical downward movement, rather than a shake itself. The actually shaking will be done in the next task, when you add a horizontal movement. ###### Final Shake

    In order to finish creating the shaking effect, you have to finish creating the @keyframes shake { ... } class within the <style>...</style> section of the src/views/Home.vue file.

    This can be done as follows:

    @keyframes shake {
    	0% { transform: translateY(-40px); opacity: 0; }
      45% { transform: translateY(0); opacity: 1; }
      55% { transform: translateX(15px); }
      ...
      100% { transform: translateX(0); }
    }
    

    The shake effect is created by going from 0% to 100%, where each step includes a transform animation.

    Now, you want to indicate what happens when you reach 65% and 80%, which is what you will complete in this next task. By the end of this step, you should see that the input section is animated when you run the application. If you click on the Add Document button, you should see a notification with a basic shaking animation.

  8. Challenge

    Final Result

    Congratulations! You have completed this lab.

    You should now have a Home.vue that looks like the one found under solution/task15/Home.vue.

    You created an animation of the main input section of the Globomantics Doc Tracker application, and also an animated Notification component that has a shaking effect.

    When you run the application the two input fields and the button to add a document to the list should be animated when the application loads. The Notification should also appear to "shake".

    After reviewing these principles and guidelines, you should now have a foundation to build your own animations in Vue 3.

    Now that you have completed this lab, you should see that the input section is animated when executing the app. If you click on the Add Document button, you should see a notification with a sliding animation, followed by a shaking animation before the notification disappears.

    If you would like to dive deeper into Vue 3 Animations, feel free to check out the following course, and add additional features to the code base:

    Vue 3 Animations

Eduardo is a technology enthusiast, software architect and customer success advocate. He's designed enterprise .NET solutions that extract, validate and automate critical business processes such as Accounts Payable and Mailroom solutions. He's a well-known specialist in the Enterprise Content Management market segment, specifically focusing on data capture & extraction and document process automation.

What's a lab?

Hands-on Labs are real environments created by industry experts to help you learn. These environments help you gain knowledge and experience, practice without compromising your system, test without risk, destroy without fear, and let you learn from your mistakes. Hands-on Labs: practice your skills before delivering in the real world.

Provided environment for hands-on practice

We will provide the credentials and environment necessary for you to practice right within your browser.

Guided walkthrough

Follow along with the author’s guided walkthrough and build something new in your provided environment!

Did you know?

On average, you retain 75% more of your learning if you get time for practice.