vue实现fadein

Vue 实现 FadeIn 效果的方法

在 Vue 中实现淡入（FadeIn）效果可以通过多种方式实现，以下是几种常见的方法：

使用 CSS Transition

通过 Vue 的过渡系统结合 CSS 的 transition 属性实现淡入效果。

<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 0.5s;
}
.fade-enter {
  opacity: 0;
}
</style>

使用 CSS Animation

通过 CSS 的 @keyframes 定义动画，并在 Vue 的过渡系统中使用。

<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 {
  animation: fadeIn 0.5s;
}
@keyframes fadeIn {
  from { opacity: 0; }
  to { opacity: 1; }
}
</style>

使用第三方动画库

可以结合第三方动画库如 Animate.css 实现更丰富的淡入效果。

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

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

使用 JavaScript 钩子

通过 Vue 的 JavaScript 过渡钩子手动控制淡入效果。

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

<script>
export default {
  data() {
    return {
      show: false
    }
  },
  mounted() {
    this.show = true
  },
  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()
        }
      }, 50)
    }
  }
}
</script>

以上方法可以根据具体需求选择，CSS Transition 和 Animation 适合简单的淡入效果，而 JavaScript 钩子和第三方库适合更复杂的动画需求。