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的例子。

我想知道怎么做！

- zero86

---

直接？你是指使用CSS吗？还是类似JavaScript的东西？ - evolutionxbox

@evolutionxbox 两者都可以！ - zero86

Answer 1

在Vue中，如果没有使用元素，则可以通过: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>

- Roko C. Buljan

---

谢谢！@NVRM请随意评论！ - Roko C. Buljan

能否切换CSS的display属性？（display：block; / display：none;） - zero86

@zero86 是的，但不会带有过渡 - 它将是即时的。你试试吧！ - Roko C. Buljan