当前位置：首页 > VUE

vue实现fadein

2026-01-12 21:16:08VUE

实现 Vue 中的淡入效果

在 Vue 中实现淡入（fade-in）效果可以通过 CSS 过渡（transition）或动画（animation）结合 Vue 的 <transition> 组件完成。以下是两种常见方法：

使用 CSS Transition 实现淡入

通过 Vue 的 <transition> 组件和 CSS 的 opacity 属性实现淡入效果：

vue实现fadein

<template>
  <div>
    <button @click="show = !show">Toggle Fade</button>
    <transition name="fade">
      <p v-if="show">This text will fade in and out</p>
    </transition>
  </div>
</template>

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

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

fade-enter-active 和 fade-leave-active 定义过渡的持续时间和属性。
fade-enter 和 fade-leave-to 定义元素进入/离开时的起始和结束状态。

使用 CSS Animation 实现淡入

通过 CSS 的 @keyframes 定义动画，并在 <transition> 中应用：

vue实现fadein

<template>
  <div>
    <button @click="show = !show">Toggle Fade</button>
    <transition name="fade">
      <p v-if="show">This text will fade in</p>
    </transition>
  </div>
</template>

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

<style>
.fade-enter-active {
  animation: fade-in 0.5s;
}
.fade-leave-active {
  animation: fade-in 0.5s reverse;
}
@keyframes fade-in {
  0% { opacity: 0; }
  100% { opacity: 1; }
}
</style>

@keyframes 定义从透明度 0 到 1 的动画。
fade-enter-active 在元素进入时触发动画。
fade-leave-active 通过 reverse 反向播放动画实现淡出。

动态控制淡入效果

可以通过 Vue 的动态绑定调整过渡时间或动画类型：

<template>
  <div>
    <button @click="show = !show">Toggle Fade</button>
    <transition :name="effect" :duration="duration">
      <p v-if="show">Dynamic fade effect</p>
    </transition>
  </div>
</template>

<script>
export default {
  data() {
    return {
      show: false,
      effect: 'fade',
      duration: 1000
    };
  }
};
</script>

通过 :duration 控制过渡时间（单位：毫秒）。
通过 :name 动态切换过渡效果名称。

结合第三方动画库

若需更复杂的动画效果，可以集成第三方库如 Animate.css：

<template>
  <div>
    <button @click="show = !show">Toggle Fade</button>
    <transition
      enter-active-class="animate__animated animate__fadeIn"
      leave-active-class="animate__animated animate__fadeOut"
    >
      <p v-if="show">Animate.css fade effect</p>
    </transition>
  </div>
</template>

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