javascript - 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 使用绑定(bind)

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>