Vue.js Animations and Transitions Tutorial
In this tutorial, we are going to explore how we can use animations and transitions to make our VueJS web application really stand out from the crowd.
A Simple Transition
Let’s start of by creating a few very simple transitions, these will simply fade in when a certain condition is met. I was watching Mission Impossible whilst writing this so the theme for this is a top secret mission. The finished product for this section is going to look something like this:
So, if we break this down this shouldn’t look as intimidating. We have 3 buttons
within a div that when clicked basically flip a boolean value. When this is
flipped, it triggers a transition in the black background div below.
<button class="btn btn-primary" v-if="!show" v-on:click="show = !show">
Show Mission
</button>
<button
class="btn btn-primary"
v-if="show && !accepted && !declined"
v-on:click="accepted = true"
>
Accept Mission
</button>
<button
class="btn btn-warning"
v-if="show && !declined && !accepted"
v-on:click="declined = true"
>
Decline Mission
</button>
These all have a v-if directive attached to them to dictate when they are to
show. Below these buttons we have 3 distinct <transition/> wrapper components.
These <transition/> components allow you to enter/leave transitions when you
are doing things like v-if, v-show, using dynamic components or in component
root nodes.
<transition name="fade">
<p v-if="show">Your Mission, should you choose to accept it...</p>
</transition>
<transition name="fade">
<p v-if="accepted">
You have accepted the mission, this message will self-destruct in 5...
</p>
</transition>
<transition name="fade">
<p v-if="declined">
You have declined the mission, this message will self-destruct in 5...
</p>
</transition>
Let’s break down what happens when one of our <p> elements appears/disappears.
Vue will automatically listen for whether one of these elements has a CSS
transition or animation applied. If it does then these CSS transition classes
will be added/removed at the appropriate time.
Full Component Source
This is the full source code for the component with simple transitions:
<template>
<div class="hello">
<h1>VueJS <span>Animations</span> and <span>Transitions</span> Tutorial</h1>
<button class="btn btn-primary" v-if="!show" v-on:click="show = !show">
Show Mission
</button>
<button
class="btn btn-primary"
v-if="show && !accepted && !declined"
v-on:click="accepted = true"
>
Accept Mission
</button>
<button
class="btn btn-warning"
v-if="show && !declined && !accepted"
v-on:click="declined = true"
>
Decline Mission
</button>
<div class="cont center-align">
<transition name="fade">
<p v-if="show">Your Mission, should you choose to accept it...</p>
</transition>
<transition name="fade">
<p v-if="accepted">
You have accepted the mission, this message will self-destruct in 5...
</p>
</transition>
<transition name="fade">
<p v-if="declined">
You have declined the mission, this message will self-destruct in 5...
</p>
</transition>
</div>
</div>
</template>
<script>
export default {
name: "HelloWorld",
data() {
return {
show: false,
accepted: false,
declined: false
};
}
};
</script>
<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>
.fade-enter-active,
.fade-leave-active {
transition: opacity 0.5s;
}
.fade-enter, .fade-leave-to /* .fade-leave-active below version 2.1.8 */ {
opacity: 0;
}
.btn-primary {
background-color: #256bfc;
}
.btn-warning {
background-color: #c81117;
}
.cont {
background-color: #000;
width: 100%;
height: 400px;
margin-top: 40px;
padding: 40px;
}
div {
color: white;
}
h1 {
font-weight: normal;
color: white;
font-weight: 100;
font-size: 58px;
}
h1 span {
font-weight: 900;
}
</style>
Conclusion
That wraps up this tutorial! I hope you found it enlightening and educational! If you enjoyed it then please let me know in the comments section below!
Further Reading
If you enjoyed this article then you may enjoy some of the other tutorials on our site: