如何在Vue中不使用transition组件实现切换淡入淡出效果

核心实现逻辑是手动管理元素的过渡状态与挂载/卸载时机，避免过渡未完成时元素被直接移除导致效果失效。 #

完整实现代码 #

HTML模板 #

<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.17/vue.js"></script>
<div id="demo">
  <button v-on:click="toggleFade">Toggle</button>
  <!-- 绑定动态类、过渡结束事件、v-if控制最终挂载卸载 -->
  <p 
    v-if="isShow" 
    :class="['fade-box', isFadeIn ? 'fade-show' : '']"
    @transitionend="handleTransitionEnd"
  >
    hello
  </p>
</div>

CSS样式 #

/* 基础样式 + 过渡配置 */
.fade-box {
  transition: opacity 0.5s;
  opacity: 0;
}
/* 显示态的样式 */
.fade-box.fade-show {
  opacity: 1;
}

JavaScript逻辑 #

new Vue({
  el: '#demo',
  data: {
    isShow: true, // 控制元素最终是否挂载
    isFadeIn: true // 控制淡入/淡出状态
  },
  methods: {
    toggleFade() {
      if (this.isFadeIn) {
        // 当前是显示状态，先触发淡出
        this.isFadeIn = false
      } else {
        // 当前是隐藏状态，先挂载元素，下一帧再触发淡入
        this.isShow = true
        this.$nextTick(() => {
          this.isFadeIn = true
        })
      }
    },
    handleTransitionEnd() {
      // 淡出过渡结束后，再卸载元素
      if (!this.isFadeIn) {
        this.isShow = false
      }
    }
  }
})

关键实现说明 #

• 淡入逻辑：不能同时设置isShow = true和isFadeIn = true，需要用$nextTick等待元素挂载完成（初始渲染为透明状态）后，再添加显示类触发过渡，否则浏览器会合并两次状态变更，看不到过渡效果。
• 淡出逻辑：不能直接修改isShow卸载元素，需要先修改状态触发淡出过渡，等待transitionend事件触发确认过渡完成后，再卸载元素，否则元素会直接消失，看不到淡出效果。
• 如果要兼容更复杂的场景，可以给transitionend事件加判断，只处理目标属性的过渡结束事件，避免其他过渡触发回调。

内容的提问来源于stack exchange，提问作者zero86