Tengo una pregunta.
En Vue.js, puede especificar fácilmente el efecto de aparición/desaparición gradual a través del componente.
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>Me pregunto cómo implementarlo directamente sin usar el componente de transición.
Yo mismo lo he intentado varias veces, pero tengo dificultades, y si busco, solo salen ejemplos de jQuery.
¡Quiero saber cómo!
En Vue , sin el elemento <transition> , use el enlace a través :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> En JavaScript 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>