Updated March 29, 2023
Introduction to Vue.js Animations
Vue.js Animations are defined as a process where multiple states occur within one declaration and make any image elements converted to moving object-like element is known as animation, which is used in Vue.js to create an easy and attractive application by drawing or designing layouts. In simple words, we can say Vue.js is defined for exploiting and managing the stabled images to be converted to the illusion of moving images is also known as the process of animating the Vue.js layouts or elements. Thus, in Vue.js various animation, libraries can be used for the creation of various layouts for designing Vue.js apps.
Working of Vue.js Animations
In this article, we will see Vue.js animation features used to design or draw the layouts for animated apps. In general, transitions and animations are taken together for designing the layouts or elements in Vue apps. In Vue.js, animations can behave like transitions, but transitions cannot do the process as in animation, where we can make various multiple steps in one declaration, and this cannot be done in transitions. There are many ways for doing the animation process using few libraries provided in Vue.js creation apps. These animations are handled similar to transitions in Vue.js, and in this, when we are writing Html file, we use the <transition> tag.
Now let us see various ways of creating Vue.js animations in the Vue.js apps using different tools provided by the Vue.js. To create an app for the user for flawless navigation throughout the application and transition from one page to another page or another component is the process of creating animated apps. We will see various classes used for animations in Vue.js, which are also used in transitions.
Let us see a few classes that are used for animation:
- v-enter: This class is mainly used to enter the first state before creating or adding any elements. In simple words, we can say this class is a starting stage for the creation of any type of animation in apps in Vue.js. Once the element is added, then we will remove v-enter but on an animation end event. v-show or v-if this class is used for displaying the content or elements in the app.
- v-enter-active: This is a class to say that the starting state has entered into an active state. And there is another class also for entering state other than v-enter and v-enter-active that is v-enter-to, which also responsible for entering the transition when the elements are inserted.
- v-leave-active: This is a class used for leaving the transition in an active or entered state, or this class is used to end the current transition state. So there are other classes which are also responsible for ending or leaving the transition state, such as v-leave-to and v-leave.
In animations of Vue.js, when we use <transition> tag, then this provides a property called “name,” which can be used in the class declaration instead of “v-” so suppose if have assigned “dropdown” to the “name” property then we can use the class as “dropdown-enter” instead of “v-enter.” So in Vue.js animation, we have 3 main classes like start state, active state, and end state transitions for the creation of navigation animation for switching from one page or component to another. Usually, we know that animations are written in CSS, so to write in js, we have an option known as hook classes, and the names are similar to that of classes provided by the transition Vue.js such as before-enter, enter, after-enter, enter-canceled, before-leave, leave, after-leave and leave-canceled.
Example
Given below is the example of Vue.js Animations:
Html File:
<html>
<head>
<title>Educba vue.js app</title>
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<style>
.vue-enter-active,
.vue-leave-active {
transition: opacity 0.3s;
}
.vue-enter,
.vue-leave-to {
opacity: 0;
}
</style>
</head>
<body>
<div id="educbaapp">
<button @click="show = !show">
click me to print the msg
</button>
<transition name="vue">
<p v-if="show">Welcome to Educba Training Institute</p>
</transition>
</div>
<script src="index.js"></script>
</body>
</html>JS File:
new Vue({
el: "#educbaapp",
data: {
show: true
}
});CSS File:
.vue-enter-active,
.vue-leave-active {
transition: opacity 0.3s;
}
.vue-enter,
.vue-leave-to {
opacity: 0;
}Output:
In the above sample program, we saw the demonstration of how animation works in the Vue.js app. In the above program, we saw we have assigned <transition> name property to “vue,” so we have used classes also starting from “vue-enter-active,” “vue-leave-active,” etc. So first, we have written an Html file which is linked to the CSS styles in the CSS file, and we have created a button. Its name is given as “click to print the msg,” then we are using a vue-if to display the message when the button is clicked. This button we can see in the first screenshot and later when we click the button then the message is printed as “Welcome to Educba training Institute” when the button is clicked which means the button is acting as a toggle where when the button is clicked, it will display the message as shown in the second screenshot else the message is not displayed if we click it again after the message is displayed. So, in general, the above program is written to create a button that will act as a toggle button; whenever you click the button, it will display a message, and if we click it again, it displays nothing.
Conclusion
In this article, we conclude that Vue.js animation is a feature for designing or drawing any layouts to make the Vue apps attractive and simple for using the apps for the users. In this, we saw as we can have multiple steps done in one single declaration in animation, but it cannot be done in the transition. Therefore, in this article, we saw to create animations in Vue.js; we use similar classes as used in transitions such as v-enter, v-enter-active, v-enter-to for starting the transition, v-leave, v-leave-active, v-leave-to for ending the transitions or animations. In this, we also saw one simple example of using all these classes.
Recommended Articles
This is a guide to Vue.js Animations. Here we discuss the introduction and working of Vue.js animations along with examples and code implementation. You may also have a look at the following articles to learn more-
