当前位置：首页 > VUE

vue实现fadein

2026-01-07 19:46:42VUE

Vue 实现 FadeIn 效果

在 Vue 中实现淡入（FadeIn）效果可以通过 CSS 过渡、动画或第三方库实现。以下是几种常见方法：

使用 CSS 过渡

通过 Vue 的过渡系统结合 CSS 实现淡入效果：

vue实现fadein

<template>
  <transition name="fade">
    <div v-if="show">内容淡入效果</div>
  </transition>
</template>

<script>
export default {
  data() {
    return {
      show: false
    }
  },
  mounted() {
    this.show = true
  }
}
</script>

<style>
.fade-enter-active {
  transition: opacity 1s ease;
}
.fade-enter-from {
  opacity: 0;
}
</style>

使用 CSS 动画

通过 @keyframes 定义动画并应用到元素：

<template>
  <div class="fade-in">内容淡入效果</div>
</template>

<style>
.fade-in {
  animation: fadeIn 1s ease-in;
}

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

使用第三方动画库

通过 animate.css 等库快速实现：

vue实现fadein

<template>
  <div class="animate__animated animate__fadeIn">内容淡入效果</div>
</template>

<script>
import 'animate.css'
</script>

动态控制透明度

通过 Vue 的数据绑定动态控制透明度：

<template>
  <div :style="{ opacity: opacity }">内容淡入效果</div>
</template>

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

使用 Vue Transition 的高级配置

配置过渡的钩子函数实现更复杂效果：

<template>
  <transition
    @before-enter="beforeEnter"
    @enter="enter"
    @after-enter="afterEnter"
  >
    <div v-if="show">内容淡入效果</div>
  </transition>
</template>

<script>
export default {
  methods: {
    beforeEnter(el) {
      el.style.opacity = 0
    },
    enter(el, done) {
      let opacity = 0
      const interval = setInterval(() => {
        opacity += 0.1
        el.style.opacity = opacity
        if (opacity >= 1) {
          clearInterval(interval)
          done()
        }
      }, 100)
    },
    afterEnter(el) {
      console.log('动画完成')
    }
  }
}
</script>

以上方法可根据项目需求选择，CSS 过渡适合简单场景，动画库适合快速开发，JavaScript 控制适合需要精细调控的场景。