To use transitions and animations in Vue.js, follow these steps:
Install the Vue.js package via npm:
npm install vue
Add Vue.js to your HTML file:
<script src="path/to/vue.js"></script>
Create a Vue instance:
new Vue({
el: '#app',
data: {
show: false
}
})
Use the transition component to define a transition:
<transition name="fade">
<p v-if="show">This will fade in and fade out</p>
</transition>
Define the CSS for the transition:
.fade-enter-active, .fade-leave-active {
transition: opacity .5s;
}
.fade-enter, .fade-leave-to {
opacity: 0;
}
Alternatively, you can use pre-defined CSS classes for common transitions:
<transition name="slide">
<!-- Content to be animated -->
</transition>
.slide-enter-active, .slide-leave-active {
transition: all .5s;
}
.slide-enter, .slide-leave-to {
transform: translateX(100px);
opacity: 0;
}
To trigger the transition, modify the value of show property:
this.show = true; // or false
Now, when the show property is true, the content within the transition component will be animated using the defined transition.