vue transition 动画

Vue.js提供了一个名为`<transition>`的组件，用于实现过渡动画效果。您可以在Vue组件的模板中使用`<transition>`组件来包裹要添加动画的元素。

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

<template>
  <div>
    <button @click="show = !show">Toggle</button>
    <transition name="fade">
      <p v-if="show">Hello Vue!</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>`元素包裹起来。通过控制`show`属性的值，我们可以在"Toggle"按钮的点击事件中切换`<p>`元素的显示与隐藏。

同时，我们还定义了一些CSS类名来定义过渡动画的效果。在这个例子中，我们使用了名为"fade"的过渡名称，并定义了两对CSS类名，分别是`.fade-enter-active`和`.fade-leave-active`以及`.fade-enter`和`.fade-leave-to`。这些类名可以通过CSS属性来指定动画效果，比如这里使用了`transition`属性来指定`opacity`的过渡效果。

当`<p>`元素出现时，会触发`.fade-enter-active`和`.fade-enter`类名，从而实现淡入效果；当`<p>`元素消失时，会触发`.fade-leave-active`和`.fade-leave-to`类名，从而实现淡出效果。

您可以根据自己的需求定制更多的过渡效果，比如缩放、位移等。更多关于Vue.js过渡动画的详细用法，请参考Vue.js官方文档。