第5章：过渡与动画

第12节：CSS过渡与动画

5.12.1 单元素/组件过渡

Vue提供了<transition>组件来实现单元素或组件的过渡效果。当元素或组件被插入、更新或移除时，Vue会自动添加/移除CSS类名，从而触发过渡效果。

基本用法

<template>
  <div>
    <button @click="show = !show">
      切换显示
    </button>
    <transition name="fade">
      <p v-if="show">hello</p>
    </transition>
  </div>
</template>

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

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

过渡类型

进入过渡：元素从隐藏到显示的过程
离开过渡：元素从显示到隐藏的过程
列表过渡：使用<transition-group>实现列表项的过渡效果

5.12.2 过渡的类名详解

Vue的过渡系统会在不同阶段添加不同的类名，这些类名遵循以下命名规则：

v- 是默认的前缀，当使用name属性时，会替换为name的值

进入过渡类名

**v-enter-from**：进入过渡的开始状态
- 在元素被插入之前添加
- 在元素被插入后的下一帧移除
**v-enter-active**：进入过渡的激活状态
- 在元素被插入之前添加
- 在过渡/动画完成后移除
- 可以定义过渡的持续时间、延迟和曲线函数
**v-enter-to**：进入过渡的结束状态
- 在元素被插入后的下一帧添加
- 在过渡/动画完成后移除

离开过渡类名

**v-leave-from**：离开过渡的开始状态
- 在离开过渡触发时立即添加
- 在下一帧移除
**v-leave-active**：离开过渡的激活状态
- 在离开过渡触发时立即添加
- 在过渡/动画完成后移除
- 可以定义过渡的持续时间、延迟和曲线函数
**v-leave-to**：离开过渡的结束状态
- 在离开过渡触发后的下一帧添加
- 在过渡/动画完成后移除

类名应用顺序

进入过渡：

元素被插入到DOM
添加v-enter-from和v-enter-active类
下一帧：移除v-enter-from，添加v-enter-to
过渡完成：移除v-enter-active和v-enter-to

离开过渡：

触发离开过渡
添加v-leave-from和v-leave-active类
下一帧：移除v-leave-from，添加v-leave-to
过渡完成：移除v-leave-active和v-leave-to，并从DOM中移除元素

5.12.3 自定义过渡类名

Vue允许使用自定义过渡类名，这对于结合第三方动画库（如Animate.css）非常有用。

使用Animate.css

<template>
  <div>
    <button @click="show = !show">
      切换动画
    </button>
    <transition
      enter-active-class="animate__animated animate__bounce"
      leave-active-class="animate__animated animate__shake"
    >
      <p v-if="show">hello</p>
    </transition>
  </div>
</template>

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

<style>
@import 'https://cdnjs.cloudflare.com/ajax/libs/animate.css/4.1.1/animate.min.css';
</style>

自定义过渡类名选项

enter-from-class
enter-active-class
enter-to-class
leave-from-class
leave-active-class
leave-to-class

5.12.4 初始渲染的过渡

默认情况下，Vue的过渡效果只在元素被插入或移除时触发，而不会在初始渲染时触发。可以使用appear属性来启用初始渲染的过渡效果。

基本用法

<transition name="fade" appear>
  <p>初始渲染的过渡</p>
</transition>

自定义初始渲染过渡类名

<transition
  name="fade"
  appear
  appear-from-class="custom-appear-from"
  appear-active-class="custom-appear-active"
  appear-to-class="custom-appear-to"
>
  <p>自定义初始渲染过渡</p>
</transition>

过渡模式

当使用v-if和v-else切换元素时，默认情况下，进入和离开过渡会同时发生。可以使用mode属性来控制过渡的顺序。

in-out模式

新元素先进行进入过渡，完成后旧元素再进行离开过渡。

<transition name="fade" mode="in-out">
  <p v-if="show" key="on">显示</p>
  <p v-else key="off">隐藏</p>
</transition>

out-in模式

旧元素先进行离开过渡，完成后新元素再进行进入过渡。

<transition name="fade" mode="out-in">
  <p v-if="show" key="on">显示</p>
  <p v-else key="off">隐藏</p>
</transition>

动态过渡

可以使用动态绑定来实现动态过渡效果。

<template>
  <div>
    <button @click="show = !show">
      切换显示
    </button>
    <select v-model="transitionName">
      <option value="fade">淡入淡出</option>
      <option value="slide">滑动</option>
    </select>
    <transition :name="transitionName">
      <p v-if="show">hello</p>
    </transition>
  </div>
</template>

<script>
export default {
  data() {
    return {
      show: true,
      transitionName: 'fade'
    }
  }
}
</script>

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

.slide-enter-active, .slide-leave-active {
  transition: all 0.5s;
}
.slide-enter-from {
  transform: translateX(-100%);
}
.slide-leave-to {
  transform: translateX(100%);
}
</style>

总结

Vue的CSS过渡系统提供了一种简单而强大的方式来实现元素的过渡效果。通过理解过渡类名的作用和顺序，以及如何使用自定义过渡类名和过渡模式，你可以创建出各种精美的过渡效果。

在下一节中，我们将学习JavaScript钩子与列表过渡，进一步扩展Vue的过渡能力。