I have a question.
In Vue.js, you can easily specify the fade in / fade out effect 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>I wonder how to implement it directly without using the transition component.
I've tried a few times myself, but I'm having difficulties, and if I search, only jQuery examples are coming out.
I want to know how!
In Vue, without the <transition> element, use binding via :class
new Vue({
el: '#demo',
data: {
show: true
}
}).item {
transition: opacity .5s;
opacity: 0;
}
.is-active {
opacity: 1;
}<div id="demo">
<button @click="show = !show">Toggle</button>
<div class="item" :class="{'is-active' : show}">hello</div>
</div>
<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.17/vue.js"></script>In JavaScript you would use the classList.toggle() :
const toggleTarget = (evt) => {
const selector = evt.currentTarget.dataset.toggle;
document.querySelectorAll(selector)
.forEach(EL => EL.classList.toggle("u-transparent"));
};
document.querySelectorAll("[data-toggle]")
.forEach(EL => EL.addEventListener("click", toggleTarget));.item {
transition: opacity .5s;
}
/* UTILITY CLASSES, ATOMS */
.u-transparent {
opacity: 0;
}<button data-toggle="#item_1">Toggle</button>
<div id="item_1" class="item">hello</div>