当前位置：首页 > VUE

vue 实现fadeout

2026-03-07 08:00:37VUE

实现 Vue 中的 Fadeout 效果

在 Vue 中实现淡出（fadeout）效果可以通过 CSS 过渡或动画结合 Vue 的指令完成。以下是几种常见方法：

使用 CSS Transition 和 v-if/v-show

通过 Vue 的 v-if 或 v-show 控制元素显示，结合 CSS 的 transition 实现淡出效果。

<template>
  <div>
    <button @click="show = !show">Toggle Fade</button>
    <div v-if="show" class="fade-element">This will fade out</div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      show: true
    }
  }
}
</script>

<style>
.fade-element {
  transition: opacity 0.5s ease;
}
.fade-element-leave-active {
  opacity: 0;
}
</style>

使用 Vue Transition 组件

Vue 内置的 <transition> 组件可以更方便地实现动画效果。

<template>
  <div>
    <button @click="show = !show">Toggle Fade</button>
    <transition name="fade">
      <div v-if="show" class="fade-element">This will fade out</div>
    </transition>
  </div>
</template>

<script>
export default {
  data() {
    return {
      show: true
    }
  }
}
</script>

<style>
.fade-enter-active, .fade-leave-active {
  transition: opacity 0.5s ease;
}
.fade-enter-from, .fade-leave-to {
  opacity: 0;
}
</style>

使用 JavaScript 钩子

通过 Vue Transition 的 JavaScript 钩子可以实现更复杂的动画逻辑。

<template>
  <div>
    <button @click="show = !show">Toggle Fade</button>
    <transition
      @before-enter="beforeEnter"
      @enter="enter"
      @leave="leave"
    >
      <div v-if="show" class="fade-element">This will fade out</div>
    </transition>
  </div>
</template>

<script>
export default {
  data() {
    return {
      show: true
    }
  },
  methods: {
    beforeEnter(el) {
      el.style.opacity = 1
    },
    enter(el, done) {
      // 可添加额外动画逻辑
      done()
    },
    leave(el, done) {
      el.style.transition = 'opacity 0.5s ease'
      el.style.opacity = 0
      setTimeout(done, 500)
    }
  }
}
</script>

使用第三方库（如 Anime.js）

对于更复杂的动画效果，可以结合第三方动画库实现。

vue 实现fadeout

<template>
  <div>
    <button @click="fadeOut">Fade Out</button>
    <div ref="fadeElement" class="fade-element">This will fade out</div>
  </div>
</template>

<script>
import anime from 'animejs'

export default {
  methods: {
    fadeOut() {
      anime({
        targets: this.$refs.fadeElement,
        opacity: 0,
        duration: 500,
        easing: 'easeInOutQuad'
      })
    }
  }
}
</script>