当前位置：首页 > VUE

vue 实现fadeout

2026-01-07 22:10:16VUE

Vue 实现淡出效果

在 Vue 中实现淡出（fade-out）效果可以通过 CSS 过渡或动画结合 Vue 的动态渲染功能完成。以下是几种常见方法：

使用 Vue 过渡（Transition）组件

Vue 内置的 <transition> 组件可以方便地实现淡出效果。通过定义 CSS 过渡类名和样式即可完成：

<template>
  <button @click="show = !show">切换</button>
  <transition name="fade">
    <p v-if="show">需要淡出的内容</p>
  </transition>
</template>

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

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

使用 CSS 动画

通过 @keyframes 定义动画，再通过 Vue 控制类名触发：

<template>
  <button @click="startFadeOut">淡出</button>
  <div :class="{ 'fade-out': isFading }">内容</div>
</template>

<script>
export default {
  data() {
    return { isFading: false }
  },
  methods: {
    startFadeOut() {
      this.isFading = true
    }
  }
}
</script>

<style>
.fade-out {
  animation: fadeOut 0.5s forwards;
}

@keyframes fadeOut {
  from { opacity: 1; }
  to { opacity: 0; }
}
</style>

结合第三方动画库

使用如 animate.css 等库快速实现：

<template>
  <transition
    enter-active-class="animate__animated animate__fadeIn"
    leave-active-class="animate__animated animate__fadeOut"
  >
    <p v-if="show">内容</p>
  </transition>
</template>

<script>
import 'animate.css'
export default {
  data() {
    return { show: true }
  }
}
</script>

动态样式绑定

通过 Vue 的样式绑定直接控制透明度：

<template>
  <div 
    :style="{ opacity: opacity }"
    @click="fadeOut"
  >点击淡出</div>
</template>

<script>
export default {
  data() {
    return { opacity: 1 }
  },
  methods: {
    fadeOut() {
      const interval = setInterval(() => {
        if (this.opacity <= 0) clearInterval(interval)
        this.opacity -= 0.1
      }, 100)
    }
  }
}
</script>