面试题：Vue 过渡动画实现的方式有哪些？

在 Vue 中，过渡动画可以通过多种方式实现，Vue 提供了内置的 <transition> 和 <transition-group> 组件来简化动画的实现。以下是 Vue 中实现过渡动画的几种常见方式：

1. 使用 `<transition>` 组件

<transition> 是 Vue 提供的内置组件，用于在元素插入、更新或移除时应用过渡效果。它通过以下 6 个类名来控制动画：

v-enter：进入动画的初始状态。
v-enter-active：进入动画的激活状态。
v-enter-to：进入动画的结束状态。
v-leave：离开动画的初始状态。
v-leave-active：离开动画的激活状态。
v-leave-to：离开动画的结束状态。

示例：

<template>
  <div>
    <button @click="show = !show">切换</button>
    <transition name="fade">
      <p v-if="show">这是一个过渡动画</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, .fade-leave-to {
  opacity: 0;
}
</style>

2. 使用 CSS 动画

除了过渡效果，还可以使用 CSS 动画（@keyframes）来实现更复杂的动画效果。

示例：

<template>
  <div>
    <button @click="show = !show">切换</button>
    <transition name="bounce">
      <p v-if="show">这是一个 CSS 动画</p>
    </transition>
  </div>
</template>

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

<style>
.bounce-enter-active {
  animation: bounce-in 0.5s;
}
.bounce-leave-active {
  animation: bounce-in 0.5s reverse;
}
@keyframes bounce-in {
  0% {
    transform: scale(0);
  }
  50% {
    transform: scale(1.5);
  }
  100% {
    transform: scale(1);
  }
}
</style>

3. 使用 JavaScript 钩子

<transition> 组件提供了 JavaScript 钩子函数，可以在动画的不同阶段执行自定义逻辑。常用的钩子包括：

before-enter
enter
after-enter
enter-cancelled
before-leave
leave
after-leave
leave-cancelled

示例：

<template>
  <div>
    <button @click="show = !show">切换</button>
    <transition
      @before-enter="beforeEnter"
      @enter="enter"
      @after-enter="afterEnter"
      @enter-cancelled="enterCancelled"
      @before-leave="beforeLeave"
      @leave="leave"
      @after-leave="afterLeave"
      @leave-cancelled="leaveCancelled"
    >
      <p v-if="show">这是一个 JavaScript 动画</p>
    </transition>
  </div>
</template>

<script>
export default {
  data() {
    return {
      show: true,
    };
  },
  methods: {
    beforeEnter(el) {
      console.log('beforeEnter');
    },
    enter(el, done) {
      console.log('enter');
      done(); // 调用 done 表示动画结束
    },
    afterEnter(el) {
      console.log('afterEnter');
    },
    enterCancelled(el) {
      console.log('enterCancelled');
    },
    beforeLeave(el) {
      console.log('beforeLeave');
    },
    leave(el, done) {
      console.log('leave');
      done(); // 调用 done 表示动画结束
    },
    afterLeave(el) {
      console.log('afterLeave');
    },
    leaveCancelled(el) {
      console.log('leaveCancelled');
    },
  },
};
</script>

4. 使用 `<transition-group>` 组件

<transition-group> 是 Vue 提供的内置组件，用于对列表中的多个元素应用过渡效果。它会为每个子元素添加唯一的 key，并支持列表的进入、离开和排序动画。

示例：

<template>
  <div>
    <button @click="addItem">添加</button>
    <button @click="removeItem">移除</button>
    <transition-group name="list" tag="ul">
      <li v-for="item in items" :key="item">{{ item }}</li>
    </transition-group>
  </div>
</template>

<script>
export default {
  data() {
    return {
      items: [1, 2, 3],
      nextNum: 4,
    };
  },
  methods: {
    addItem() {
      this.items.push(this.nextNum++);
    },
    removeItem() {
      this.items.pop();
    },
  },
};
</script>

<style>
.list-enter-active, .list-leave-active {
  transition: all 1s;
}
.list-enter, .list-leave-to {
  opacity: 0;
  transform: translateY(30px);
}
</style>

5. 使用第三方动画库

Vue 可以与第三方动画库（如 Animate.css 或 GSAP）结合使用，实现更复杂的动画效果。

示例（使用 Animate.css）：

<template>
  <div>
    <button @click="show = !show">切换</button>
    <transition
      enter-active-class="animate__animated animate__bounceIn"
      leave-active-class="animate__animated animate__bounceOut"
    >
      <p v-if="show">这是一个第三方动画</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>

6. 动态过渡

Vue 支持根据条件动态切换过渡效果，可以通过绑定 name 属性实现。

示例：

<template>
  <div>
    <button @click="show = !show">切换</button>
    <transition :name="transitionName">
      <p v-if="show">这是一个动态过渡</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, .fade-leave-to {
  opacity: 0;
}
</style>