Vue提供了<transition>组件来实现DOM元素在插入、更新和删除时的过渡效果，它能够在DOM元素的添加、删除、更新时自动触发动画。使用<transition>组件可以让我们轻松地实现常见的过渡效果，例如淡入淡出、滑动、缩放等。

<transition>组件可以通过以下几个属性来配置动画效果：

• name：指定CSS类名前缀，用于设置过渡动画的CSS样式，默认值为"v-"。

• appear：设置是否在初始渲染时触发过渡动画，默认为false。

• appear-class：指定初始渲染时的CSS类名。

• enter-class：指定插入过渡开始时的CSS类名。

• enter-active-class：指定插入过渡的过程中的CSS类名。

• enter-to-class：指定插入过渡结束时的CSS类名。

• leave-class：指定删除过渡开始时的CSS类名。

• leave-active-class：指定删除过渡的过程中的CSS类名。

• leave-to-class：指定删除过渡结束时的CSS类名。

<transition>组件可以配合<transition-group>组件使用，实现多个DOM元素之间的过渡效果。

下面是一个简单的例子，展示如何使用<transition>组件来实现一个淡入淡出的过渡效果：

<template>
  <div>
    <button @click="show = !show">{{ show ? '隐藏' : '显示' }}</button>
    <transition name="fade">
      <p v-if="show">这是一个过渡效果</p>
    </transition>
  </div></template><style>.fade-enter-active, .fade-leave-active {  transition: opacity .5s;
}.fade-enter, .fade-leave-to {  opacity: 0;
}</style><script>export default {  data() {    return {      show: false
    };
  }
};</script>

在上述代码中，我们使用了<transition>组件来包裹一个<p>元素，并设置了name属性为"fade"，同时定义了"fade-enter-active"、"fade-leave-active"、"fade-enter"、"fade-leave-to"四个CSS类名来实现淡入淡出的过渡效果。

在点击按钮时，<p>元素会有一个淡入淡出的过渡效果。

<transition>组件是Vue提供的一个非常方便的组件，可以帮助我们快速实现DOM元素的过渡效果，让页面更加生动、美观。