vue 实现淡入淡出

淡入淡出效果实现方法

使用Vue过渡系统

Vue内置了过渡系统，通过<transition>组件和CSS类名实现淡入淡出效果。在模板中添加<transition>包裹目标元素，并设置name属性为自定义过渡名称（如fade）。

<transition name="fade">
  <div v-if="show">需要淡入淡出的内容</div>
</transition>

CSS中定义过渡样式：

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

自定义过渡类名

可通过enter-class等属性覆盖默认类名，与第三方动画库（如Animate.css）结合使用：

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

JavaScript钩子实现

通过<transition>的JavaScript钩子实现更复杂的逻辑：

<transition
  @before-enter="beforeEnter"
  @enter="enter"
  @after-enter="afterEnter"
>
  <div v-if="show">内容</div>
</transition>

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)
  }
}

列表过渡

对v-for渲染的列表使用<transition-group>实现逐个淡入淡出：

<transition-group name="fade-list" tag="ul">
  <li v-for="item in items" :key="item.id">
    {{ item.text }}
  </li>
</transition-group>

.fade-list-enter-active, .fade-list-leave-active {
  transition: all 0.5s;
}
.fade-list-enter, .fade-list-leave-to {
  opacity: 0;
  transform: translateY(20px);
}

动态过渡

通过绑定属性实现动态过渡效果：

<transition :name="transitionName">
  <div v-if="show">内容</div>
</transition>

data() {
  return {
    transitionName: 'fade'
  }
}