Do you have a question?
In Vue.js, achieving the fade in / fade out effect can be easily done by specifying it through the component.
new Vue({
el: '#demo',
data: {
show: true
}
}).fade-enter-active, .fade-leave-active {
transition: opacity .5s;
}
.fade-enter, .fade-leave-to /* .fade-leave-active below version 2.1.8 */ {
opacity: 0;
}<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.17/vue.js"></script>
<div id="demo">
<button v-on:click="show = !show">
Toggle
</button>
<transition name="fade">
<p v-if="show">hello</p>
</transition>
</div>Have you ever wondered how to achieve this effect without using the transition component directly?
I've experimented with it myself multiple times, but I'm facing challenges, and all my search results provide jQuery examples only.
If you know how to do it, please share your knowledge!