javascript切换淡入淡出效果

Question

我有一个问题。

在Vue.js中，你可以通过组件轻松指定淡入/淡出效果。

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>

不知道如何不使用过渡组件直接实现。

我自己尝试了几次，但我遇到了困难，如果我搜索，只会出现 jQuery 示例。

我想知道怎么做！

Answer 1

在 Vue 中，没有 <transition> 元素，通过 :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>

在 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>