vue中的transition组件可以用来创建动画吗

是的，Vue 中的 `transition` 组件可以用来创建动画效果，通过在元素的进入、离开或同时进行时应用不同的 CSS 类，从而实现过渡动画效果。

`transition` 组件可以在元素进入或离开时触发以下四个 CSS 类：

- 进入过渡动画：
- `v-enter`: 进入过渡动画的开始状态，此时元素还没有插入到 DOM 中。
- `v-enter-active`: 进入过渡动画的过程状态，此时可以通过设置 CSS 过渡或动画来实现动画效果。
- `v-enter-to`: 进入过渡动画的结束状态，此时元素已经插入到 DOM 中。
- 离开过渡动画：
- `v-leave`: 离开过渡动画的开始状态，此时元素还没有从 DOM 中移除。
- `v-leave-active`: 离开过渡动画的过程状态，此时可以通过设置 CSS 过渡或动画来实现动画效果。
- `v-leave-to`: 离开过渡动画的结束状态，此时元素已经从 DOM 中移除。

下面是一个简单的示例，用于说明 `transition` 组件的用法：

<template>
  <div>
    <button @click="show = !show">Toggle</button>
    <transition name="fade">
      <p v-if="show">Hello World!</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` 元素，并在 `p` 元素上使用 `v-if` 指令来控制其显示或隐藏。然后，我们通过点击按钮来切换 `show` 变量的值，从而触发 `transition` 组件的进入或离开过渡动画。

在样式中，我们定义了 `fade-enter-active` 和 `fade-leave-active` 类来设置过渡动画的过程状态，定义了 `fade-enter` 和 `fade-leave-to` 类来设置过渡动画的开始和结束状态。在这个示例中，我们使用了 `opacity` 属性来实现淡入淡出的动画效果。

需要注意的是，为了让 `transition` 组件正常工作，我们还需要定义一个过渡名称，可以通过 `name` 属性来设置。在上面的示例中，我们将过渡名称设置为 `fade`。