Learn about Vue transitions and animations with examples

Author: Matt Maribojoc
Translator: Front-end Xiaozhi Source: stackabuse

If you have dreams and dry goods, you can search for [Great Move to the World] on WeChat and pay attention to this Shawanzhi who is still washing dishes in the early hours of the morning.

This article GitHub https://github.com/qq449245884/xiaozhi has been included, there are complete test sites, materials and my series of articles for interviews with first-line manufacturers.

Vue transitions and animations are a great way to make our website more modern and provide a better user experience for website visitors. Luckily for developers, Vue animations only take a few minutes to set up.

The text mainly introduces the Vue <transition> element, uses this element to create some Vue animations, and learns the basics of adding it to a project.

First, let's take a look at how Vue Transitiont handles conditionally rendered content.

Then, create your own CSS animation styles.

Finally, we'll see how to use third-party CSS libraries with Vue animations.

Understanding Vue Transitions

While most people think of transitions as decorations, well-designed transitions can:

• Capture and direct the user's attention
• Emphasize important information
• Guide the user through the page
• Help build a more professional brand image

All these points will help to improve the user experience of our website, increase the conversion rate and user retention rate, which is a win-win.

Add Vue transitions to our project

To accommodate most developers, VueJS provides several ways to implement transitions:

1. css or animated transition styles
2. JS Hook to edit the DOM
3. Integrate third-party CSS

The difficulty of these methods depends on your existing knowledge.

What is the <transition> element?

transition Element is a wrapper that helps us add transition functionality to an element. It provides different hooks and adds classes to changing elements so we can style them at different stages of the transition.

1. enter-from-class
2. enter-active-class
3. enter-to-class
4. leave-from-class
5. leave-active-class
6. leave-to-class

This is especially useful when adding custom libraries to the code, as we'll explain later.

 <transition 
  enter-active-class="animated fadeIn zoomIn" 
  leave-active-class="animated fadeOut zoomOut"
>
...
</transition>

Also, the transition element emits JS hook functions, so we can catch them and use JS to perform animations. Available hooks are:

• before-enter / before-leave
• enter / leave
• after-enter / after-leave
• enter-cancelled / leave-cancelled

 <transition   @before-enter='beforeEnter'>
    <!-- ... -->
</transition>

Then, we can handle them in JS.

 beforeEnter(el, done) {
   done()
}

Vue Transition Advanced Usage

The above are just some basics. In the project, there will be more complicated scenarios. How to do this?

Make the component transition under load

This is very easy to achieve, just add the appear attribute to the transition element as follows:

 <transition name="fade" appear>
...
</transition>

Transition between multiple elements

Suppose there are two such alternates div .

 <transition name="fade" appear>
  <div v-if="visible">
    Option A
  </div>
  <div v-else>
    Option B
  </div>
</transition>

All we have to do is wrap them in transition so that the transition style will apply to both.

To make the code work the way we want, there are a few things to keep in mind:

1. Absolutely positioned elements

When Vue transitions between two elements, it sometimes shows both elements at the same time and makes an in/out transition. You may need to position them absolutely on top of each other if you want a smooth effect.

Otherwise, when elements are added to or removed from the DOM, those elements may just jump around.

2. If the elements are the same, you must add a key attribute to the component

If the elements are the same, Vue will try to optimize the content and only replace the content of the element. According to the documentation , if you want to transition between multiple elements, it's best to always add key .

Change the transition time

Vue can detect when the transition/animation ends, but if we want to set the exact duration, we can do so via the duration property.

We can pass a single value for both enter and leave transitions, or an object with two values.

 <transition :duration="500">...</transition> 
...
<transition :duration="{ enter: 1000, leave: 200 }">...</transition>

Transitions between dynamic components

All we have to do is wrap the dynamic component in a transition element.

 <transition name="fade" appear>
     <component :is='componentType' />
 </transition>

Create a reusable transition component

During development, it is a good practice to try to design reusable components.

Encapsulating a reusable transition is very simple, put a slot in the transition, as follows:

 <template>
   <transition name="fade" appear>
     <slot></slot>
   </transition>
 </template>

Now, instead of worrying about adding transition styles, names and everything to each component, we can just use this component.

So far, we've seen the <transition> element, and we can now use it to animate.

Build your first animation

 <template>
  <div class='main-content'>
    <transition name='rotate'>
      <img 
        v-if='show' 
        src='../img/logo.png'
      > 
    </transition>
  </div>
</template>

<script>
export default {
  data () {
    return {
      show: true
    }
  }
}
</script>

Next, we add a button that toggles the display of the element by toggling the value of the variable.

 <button @click='show = !show'> Toggle </button>

After setting the element's conditional rendering, we use two classes to style the animation: rotate-enter-active and rotate-leave-active because we named the transition rotate .

One trick is to use the same animation for exit and entry, just in opposite directions.

 @keyframes rotate {
    0% { opacity: 0; transform: scale(0) rotate(-180deg); }
    100% { opacity: 1; transform: scale(1) rotate(0deg); }
}

.rotate-enter-active {
    animation: rotate 0.2s;
}

.rotate-leave-active {
    animation: rotate 0.2s reverse;
}

Now, when switching our components, we should see something like this.

Use third-party libraries

Suppose we don't want to write all the CSS animations ourselves. There are a lot of great CSS animation libraries out there that can easily be incorporated into VueJS animations.

In the first example, we just used the default class name generated by the <transition> element, but all we can do is override these values into whatever class we want, in this case, It will be the class name in the CSS library.

For our example, we are using [ Animate.css](https://daneden.github.io/animate.css/) this animation library, we just need to add the CDN link to our index.html file.

 // index.html
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/animate.css/3.7.2/animate.min.css">

Now, in our <transition> element, we can use the enter-active-class and leave-active-class attributes to connect the transition to Animate.js .

 <transition 
  enter-active-class="animated fadeIn zoomIn" 
  leave-active-class="animated fadeOut zoomOut"
>
...
</transition>

It's super simple, and it works like this:

~End, I'm the front-end Xiaozhi, go to Banzhuan, see you in the next issue!

---

The bugs that may exist after the code is deployed cannot be known in real time. In order to solve these bugs afterwards, a lot of time is spent on log debugging. By the way, I recommend a useful bug monitoring tool , Fundebug .

Original: https://learne.co/2020/02/vuejs-aniions-for-beginners/

comminicate

If you have dreams and dry goods, you can search for [Great Move to the World] on WeChat and pay attention to this Shawanzhi who is still washing dishes in the early hours of the morning.

This article GitHub https://github.com/qq449245884/xiaozhi has been included, there are complete test sites, materials and my series of articles for interviews with first-line manufacturers.