面试题：Vue过渡动画在列表更新时的高级应用

Question

有一个Vue列表，使用v - for指令渲染数据。当列表数据发生变化（增加、删除、修改）时，希望列表项以过渡动画的形式更新，比如新增加的项从右侧滑入，删除的项从左侧滑出，修改的项有淡入淡出的过渡效果。请详细说明实现步骤，并给出核心代码。

Answer 1

1. 实现步骤：
   • 创建过渡组件：使用Vue的<transition>和<transition - group>组件。<transition - group>用于列表这种多个元素过渡的场景。
   • 定义过渡样式：利用CSS的transition或animation属性来定义滑入、滑出、淡入淡出等动画效果。
   • 绑定数据和过渡：在Vue模板中，将列表数据与<transition - group>组件结合，通过v - for指令渲染列表项，并设置合适的key值，以帮助Vue识别每个列表项。
2. 核心代码：
   • HTML模板：

<template>
  <div>
    <button @click="addItem">添加项</button>
    <button @click="removeItem">删除项</button>
    <button @click="updateItem">修改项</button>
    <transition - group name="list - transition" tag="ul">
      <li v - for="(item, index) in list" :key="index">
        {{ item }}
      </li>
    </transition - group>
  </div>
</template>

• CSS样式：

.list - transition - enter - from,
.list - transition - leave - to {
  opacity: 0;
  transform: translateX(100%);
}
.list - transition - leave - from,
.list - transition - enter - to {
  opacity: 1;
  transform: translateX(0);
}
.list - transition - move {
  transition: transform 0.3s ease - in - out;
}

• Vue组件的JavaScript部分：

export default {
  data() {
    return {
      list: [1, 2, 3]
    };
  },
  methods: {
    addItem() {
      this.list.push(this.list.length + 1);
    },
    removeItem() {
      if (this.list.length > 0) {
        this.list.pop();
      }
    },
    updateItem() {
      if (this.list.length > 0) {
        this.list[0] = this.list[0] + 1;
      }
    }
  }
};