Vue.js的transition过渡动画是什么？如何实现？

ue.js的transition过渡动画是一种在组件插入、更新或移除时自动应用的动画效果。Vue.js的transition动画可以通过在组件的根元素上添加<transition>或<transition-group>标签来实现。在<transition>或<transition-group>标签中，可以使用不同的CSS类来定义进入、离开和过渡状态的动画效果。

下面是一个使用<transition>标签实现的例子：

<template>
  <div>
    <button @click="show = !show">Toggle</button>
    <transition name="fade">
      <p v-if="show">Hello!</p>
    </transition>
  </div>
</template>

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

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

在上面的例子中，使用<transition>标签包裹一个<p>标签，并定义了一个名为”fade”的过渡效果。当show为true时，<p>标签会出现，此时会触发fade-enter和fade-enter-active类的动画效果；当show为false时，<p>标签会消失，此时会触发fade-leave和fade。