javascript切换淡入淡出效果

Posted 2023-02-16

【中文标题】javascript切换淡入淡出效果

【英文标题】：javascirpt toggle fade effects

【发布时间】：2021-11-02 02:52:20

【问题描述】：

我有一个问题。

在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 示例。

我想知道怎么做！

【问题讨论】：

直接？你的意思是使用CSS？还是 javascript 之类的？

@evolutionxbox 两个！

【参考方案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>

【讨论】：

谢谢！ @NVRM 欢迎评论！

是否可以切换css显示属性？ （显示：块；/显示：无；）

@zero86 是的，但不是过渡 - 这将是即时的。试试看！