垦荒学园
  • 中文

      • Vue 过渡和动画

      Vue 提供了 <Transition> 和 <TransitionGroup> 这两个内置组件，可以帮助我们轻松地为进入、离开或列表变化的元素添加过渡和动画效果。

      <Transition> 组件

      <Transition> 是一个内置组件，这意味着它无需注册就可以在任何组件的模板中使用。它可以为一个元素或组件的进入和离开应用动画。

      它支持的场景包括：

      • 由 v-if 或 v-show 触发的条件渲染。
      • 由 <component> 切换的动态组件。
      • 路由切换。

      使用方法

      将需要添加过渡效果的元素包裹在 <Transition> 组件中即可。

      <script setup>
import { ref } from 'vue'

const show = ref(true)
</script>

<template>
  <button @click="show = !show">Toggle</button>
  <Transition name="fade">
    <p v-if="show">hello</p>
  </Transition>
</template>

<style>
/*
  进入和离开动画都可以使用。 
  `v-enter-from`, `v-enter-active`, `v-enter-to` 
  `v-leave-from`, `v-leave-active`, `v-leave-to`
*/

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

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

      当 <p> 元素被插入或移除时，Vue 会自动添加或移除一系列 CSS class。

      1. 进入 (Enter):
        • fade-enter-from: 进入动画的起始状态。
        • fade-enter-active: 应用于整个进入动画期间。
        • fade-enter-to: 进入动画的结束状态。
      2. 离开 (Leave):
        • fade-leave-from: 离开动画的起始状态。
        • fade-leave-active: 应用于整个离开动画期间。
        • fade-leave-to: 离开动画的结束状态。

      这里的 fade 是 <Transition> 组件的 name prop。如果没有 name，则 class 的前缀默认为 v。

      <TransitionGroup> 组件

      <TransitionGroup> 是为 v-for 列表中的元素或组件添加过渡效果的组件。它有几个特点：

      • 默认情况下，它不会渲染一个包裹元素。但你可以通过 tag prop 指定一个元素来渲染。
      • 过渡效果会应用到内部的每一个元素上，而不是容器自身。
      • 必须为列表中的每个元素提供一个唯一的 key attribute。
      • 它不仅能处理元素的进入和离开，还能处理元素位置的移动，这通过 v-move class 实现。

      示例：列表的移动过渡

      <script setup>
import { ref } from 'vue'
import { shuffle } from 'lodash-es' // 一个打乱数组的工具函数

const items = ref([1, 2, 3, 4, 5])

function shuffleItems() {
  items.value = shuffle(items.value)
}
</script>

<template>
  <button @click="shuffleItems">Shuffle</button>
  <TransitionGroup name="list" tag="ul">
    <li v-for="item in items" :key="item">
      {{ item }}
    </li>
  </TransitionGroup>
</template>

<style>
.list-move,
.list-enter-active,
.list-leave-active {
  transition: all 0.5s ease;
}

.list-enter-from,
.list-leave-to {
  opacity: 0;
  transform: translateX(30px);
}

/* 确保离开的元素从布局流中删除，以便能够正确地计算移动的动画。 */
.list-leave-active {
  position: absolute;
}
</style>

      v-move class 会在元素改变位置时被应用。它通常用于指定一个 CSS transition，使得列表的重新排序过程变得平滑。