Vue中的Transition Group组件：列表变动、动画调度与Key的管理机制

大家好，今天我们来深入探讨Vue中一个非常重要的组件：<TransitionGroup>。它用于管理多个元素的过渡和动画，尤其是在列表发生变动时，能够优雅地处理新增、删除和移动的元素，提供平滑的视觉效果。我们将从基础用法入手，逐步深入到动画调度、Key的管理以及一些高级应用。

1. <TransitionGroup>的基本使用

<TransitionGroup>组件本质上是一个包裹器，它不会渲染任何额外的DOM元素，而是将其子元素作为整体进行过渡处理。与单个 <Transition> 组件不同，<TransitionGroup> 主要用于列表或者一组元素的动画。

最简单的例子：

<template>
  <div>
    <button @click="addItem">Add Item</button>
    <transition-group name="list" tag="ul">
      <li v-for="item in items" :key="item.id">{{ item.text }}</li>
    </transition-group>
  </div>
</template>

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

export default {
  setup() {
    const items = ref([
      { id: 1, text: 'Item 1' },
      { id: 2, text: 'Item 2' },
    ]);

    let nextId = 3;

    const addItem = () => {
      items.value.push({ id: nextId++, text: `Item ${nextId - 1}` });
    };

    return {
      items,
      addItem,
    };
  },
};
</script>

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

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

.list-move {
  transition: transform 0.5s ease; /* 重要：处理元素移动的过渡 */
}
</style>

在这个例子中，我们使用 transition-group 包裹了一个 ul 列表。name="list" 定义了过渡的CSS类名前缀。当 items 数组发生变化时，Vue会自动应用相应的CSS类来实现动画效果。tag="ul" 指定了包裹元素的类型，默认为 span。

2. <TransitionGroup>的过渡类名

<TransitionGroup>的过渡类名与单个 <Transition> 组件类似，但略有不同，因为它需要处理多个元素的状态。常用的类名包括：

.list-enter-from: 进入过渡的起始状态。
.list-enter-active: 进入过渡的激活状态，用于定义过渡的持续时间和缓动函数。
.list-enter-to: 进入过渡的结束状态。
.list-leave-from: 离开过渡的起始状态。
.list-leave-active: 离开过渡的激活状态，用于定义过渡的持续时间和缓动函数。
.list-leave-to: 离开过渡的结束状态。
.list-move: 重点！ 当列表中的元素位置发生改变时，该类名会被应用。这允许你对元素的移动进行动画处理。

3. v-move 的重要性：处理列表排序

v-move 钩子是<TransitionGroup> 中一个至关重要的特性，它负责处理列表中元素位置发生变化时的动画。如果没有 v-move，当列表排序时，元素会直接跳到新的位置，看起来很生硬。

在上面的例子中，.list-move 类就定义了元素移动的过渡效果。如果没有这个类，当你对 items 数组进行排序时，<li> 元素会瞬间移动到它们的新位置，而不会有平滑的过渡效果。

假设我们添加一个排序按钮：

<template>
  <div>
    <button @click="addItem">Add Item</button>
    <button @click="sortItems">Sort Items</button>
    <transition-group name="list" tag="ul">
      <li v-for="item in items" :key="item.id">{{ item.text }}</li>
    </transition-group>
  </div>
</template>

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

export default {
  setup() {
    const items = ref([
      { id: 1, text: 'Item 1' },
      { id: 2, text: 'Item 2' },
    ]);

    let nextId = 3;

    const addItem = () => {
      items.value.push({ id: nextId++, text: `Item ${nextId - 1}` });
    };

    const sortItems = () => {
      items.value.sort((a, b) => b.id - a.id); // 降序排列
    };

    return {
      items,
      addItem,
      sortItems,
    };
  },
};
</script>

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

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

.list-move {
  transition: transform 0.5s ease; /* 重要：处理元素移动的过渡 */
}
</style>

现在点击 "Sort Items" 按钮，列表会按照 id 降序排列，并且由于 .list-move 类的存在，元素会平滑地移动到新的位置。

4. JavaScript 钩子函数

除了CSS类名，<TransitionGroup> 也支持 JavaScript 钩子函数，允许你更精细地控制过渡过程。这些钩子函数与单个 <Transition> 组件的钩子函数类似：

beforeEnter(el): 元素插入DOM之前调用。
enter(el, done): 元素插入DOM时调用。必须调用 done 回调函数来结束过渡。
afterEnter(el): 元素插入DOM之后调用。
enterCancelled(el): 进入过渡被取消时调用。
beforeLeave(el): 元素离开DOM之前调用。
leave(el, done): 元素离开DOM时调用。必须调用 done 回调函数来结束过渡。
afterLeave(el): 元素离开DOM之后调用。
leaveCancelled(el): 离开过渡被取消时调用。

例如：

<template>
  <div>
    <button @click="addItem">Add Item</button>
    <transition-group
      name="list"
      tag="ul"
      @before-enter="beforeEnter"
      @enter="enter"
      @after-enter="afterEnter"
      @leave="leave"
    >
      <li v-for="item in items" :key="item.id">{{ item.text }}</li>
    </transition-group>
  </div>
</template>

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

export default {
  setup() {
    const items = ref([
      { id: 1, text: 'Item 1' },
      { id: 2, text: 'Item 2' },
    ]);

    let nextId = 3;

    const addItem = () => {
      items.value.push({ id: nextId++, text: `Item ${nextId - 1}` });
    };

    const beforeEnter = (el) => {
      el.style.opacity = 0; // 设置初始透明度
    };

    const enter = (el, done) => {
      gsap.to(el, {  // 使用GSAP动画库
        opacity: 1,
        y: 0,
        duration: 0.5,
        onComplete: done,
      });
    };

    const afterEnter = (el) => {
      // 可以做一些进入动画完成后的处理
    };

    const leave = (el, done) => {
      gsap.to(el, {
        opacity: 0,
        y: 30,
        duration: 0.5,
        onComplete: done,
      });
    };

    return {
      items,
      addItem,
      beforeEnter,
      enter,
      afterEnter,
      leave,
    };
  },
};
</script>

<style>
.list-move {
  transition: transform 0.5s ease;
}
</style>

在这个例子中，我们使用了 GreenSock (GSAP) 动画库来控制进入和离开的动画。 enter 和 leave 钩子函数必须调用 done 回调，告诉 Vue 过渡已经完成。

5. Key 的重要性：Vue 如何追踪列表变化

key 属性是 Vue 追踪列表节点变化的关键。当 Vue 渲染一个列表时，它会使用 key 来识别每个节点的身份。当列表发生变化时，Vue 会比较新旧列表中节点的 key，并根据 key 的匹配情况来判断节点是新增、删除还是移动。

新增: 如果新列表中存在一个 key，而旧列表中不存在，Vue 会创建一个新的节点。
删除: 如果旧列表中存在一个 key，而新列表中不存在，Vue 会删除对应的节点。
移动: 如果新旧列表中都存在一个 key，但节点的位置发生了变化，Vue 会移动对应的节点。

没有 key 会发生什么？

如果没有提供 key，Vue 只能使用“就地更新”的策略。这意味着当列表发生变化时，Vue 会尝试尽可能地复用现有的节点，而不是创建新的节点。这种策略在某些情况下可以提高性能，但可能会导致一些问题：

动画不正确: 由于 Vue 没有正确地识别节点的身份，可能会导致动画效果不正确。例如，当列表排序时，元素可能会直接跳到新的位置，而不会有平滑的过渡效果。
状态丢失: 如果列表中的节点包含一些内部状态（例如，输入框的值），就地更新可能会导致这些状态丢失。

key 的选择

为了确保 Vue 能够正确地追踪列表变化，你需要选择一个能够唯一标识每个节点的 key。理想情况下，这个 key 应该是稳定的，并且不会随着列表的变化而改变。

使用唯一ID: 如果你的数据中包含一个唯一的ID（例如，数据库中的主键），那么可以使用这个ID作为 key。
使用索引 (谨慎): 可以使用数组的索引作为 key，但只有在列表永远不会被排序或过滤的情况下才可行。因为当列表排序或过滤时，索引会发生变化，导致 Vue 错误地识别节点的身份。

6. 处理复杂的过渡效果

<TransitionGroup> 不仅仅局限于简单的淡入淡出或位移动画。你可以使用 JavaScript 钩子函数和CSS类名来实现更复杂的过渡效果。

例如，你可以使用GSAP或其他动画库来实现逐个元素的动画：

<template>
  <div>
    <button @click="addItem">Add Item</button>
    <transition-group
      name="list"
      tag="ul"
      @enter="enterStaggered"
      @leave="leaveStaggered"
    >
      <li v-for="item in items" :key="item.id">{{ item.text }}</li>
    </transition-group>
  </div>
</template>

<script>
import { ref } from 'vue';
import gsap from 'gsap';

export default {
  setup() {
    const items = ref([
      { id: 1, text: 'Item 1' },
      { id: 2, text: 'Item 2' },
    ]);

    let nextId = 3;

    const addItem = () => {
      items.value.push({ id: nextId++, text: `Item ${nextId - 1}` });
    };

    const enterStaggered = (el, done) => {
      gsap.fromTo(
        el,
        { opacity: 0, x: -100 },
        {
          opacity: 1,
          x: 0,
          duration: 0.5,
          delay: el.index * 0.1, // 逐个元素延迟
          onComplete: done,
        }
      );
    };

    const leaveStaggered = (el, done) => {
      gsap.to(el, {
        opacity: 0,
        x: 100,
        duration: 0.5,
        delay: el.index * 0.1,
        onComplete: done,
      });
    };

    return {
      items,
      addItem,
      enterStaggered,
      leaveStaggered,
    };
  },
  mounted() {
    // 在元素挂载后，为每个元素添加index属性
    this.items.forEach((item, index) => {
      item.index = index;
    });
  },
  updated() {
     // 在元素更新后，为每个元素添加index属性,因为列表可能被排序
    this.items.forEach((item, index) => {
      item.index = index;
    });
  }
};
</script>

<style>
.list-move {
  transition: transform 0.5s ease;
}
</style>

在这个例子中，我们使用 gsap.fromTo 和 gsap.to 方法来定义进入和离开的动画。 delay: el.index * 0.1 实现了逐个元素的延迟效果，使得动画看起来更加生动。注意我们在mounted和updated生命周期钩子中都为每个元素添加了index属性，这是为了确保在列表排序后，index属性仍然是正确的。

7. 使用 appear 属性实现初始渲染动画

<TransitionGroup> 组件也支持 appear 属性，用于在组件首次渲染时应用过渡效果。这可以让你在页面加载时就显示一个动画效果。

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

<script>
import { ref, onMounted } from 'vue';

export default {
  setup() {
    const items = ref([]);

    onMounted(() => {
      // 模拟异步加载数据
      setTimeout(() => {
        items.value = [
          { id: 1, text: 'Item 1' },
          { id: 2, text: 'Item 2' },
        ];
      }, 500);
    });

    return {
      items,
    };
  },
};
</script>

<style>
.list-enter-active,
.list-leave-active,
.list-appear-active { /* 包含 appear-active */
  transition: all 0.5s ease;
}

.list-enter-from,
.list-leave-to,
.list-appear-from { /* 包含 appear-from */
  opacity: 0;
  transform: translateY(30px);
}

.list-move {
  transition: transform 0.5s ease;
}
</style>

注意，当使用 appear 属性时，你需要定义 .list-appear-from 和 .list-appear-active 类名，类似于 .list-enter-from 和 .list-enter-active。

8. 动态过渡：根据条件应用不同的动画

有时候，你可能需要根据不同的条件应用不同的过渡效果。可以使用动态组件和计算属性来实现这一点。

<template>
  <div>
    <button @click="toggleType">Toggle Type</button>
    <transition-group :name="transitionName" tag="ul">
      <li v-for="item in items" :key="item.id">{{ item.text }}</li>
    </transition-group>
  </div>
</template>

<script>
import { ref, computed } from 'vue';

export default {
  setup() {
    const items = ref([
      { id: 1, text: 'Item 1' },
      { id: 2, text: 'Item 2' },
    ]);

    const type = ref('fade'); // 初始类型

    const toggleType = () => {
      type.value = type.value === 'fade' ? 'slide' : 'fade';
    };

    const transitionName = computed(() => {
      return type.value === 'fade' ? 'fade' : 'slide';
    });

    return {
      items,
      toggleType,
      transitionName,
    };
  },
};
</script>

<style>
/* Fade 过渡 */
.fade-enter-active,
.fade-leave-active {
  transition: opacity 0.5s ease;
}

.fade-enter-from,
.fade-leave-to {
  opacity: 0;
}

/* Slide 过渡 */
.slide-enter-active,
.slide-leave-active {
  transition: transform 0.5s ease;
}

.slide-enter-from {
  transform: translateX(-100px);
  opacity: 0;
}

.slide-leave-to {
  transform: translateX(100px);
  opacity: 0;
}

.list-move {
  transition: transform 0.5s ease;
}
</style>

在这个例子中，我们使用 transitionName 计算属性来动态地设置 <TransitionGroup> 的 name 属性，从而根据 type 的值应用不同的CSS类名。

对列表变动，动画调度和Key管理的最后思考

<TransitionGroup> 是 Vue 中一个强大且灵活的组件，能够优雅地处理列表的过渡和动画。正确地使用 key 属性，并结合 CSS 类名和 JavaScript 钩子函数，你可以实现各种复杂的动画效果，提升用户体验。记住，v-move 类对于处理列表排序至关重要。通过合理运用这些技术，你可以打造出更加生动和引人入胜的界面。

更多IT精英技术系列讲座，到智猿学院

Vue中的Transition Group组件：列表变动、动画调度与Key的管理机制

发表回复 取消回复

发表回复取消回复