javascirpt toggle fade effects

Question

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!

Answer 1

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>