vue中如何使用动画

在 Vue 中，可以使用 CSS 过渡和动画 API 来实现动画效果。

1. 使用 CSS 过渡

Vue 提供了 transition 组件，用于在元素插入或删除时添加过渡效果。你需要在组件中使用 transition 组件，在里面嵌套需要添加过渡效果的元素，并定义相应的 CSS 样式。

例如，在模板中添加以下代码：

<transition name="fade">
  <p v-if="show">Hello World</p>
</transition>

其中，name 属性指定了过渡名称，可以自定义。v-if 指令用来控制内容的出现和隐藏。

然后，在样式中定义过渡的 CSS 样式：

.fade-enter,
.fade-leave-to {
  opacity: 0;
}

.fade-enter-active,
.fade-leave-active {
  transition: opacity 0.5s;
}

效果就是当 show 满足条件时，p 元素从透明度为 0 的状态渐渐变为完全显示，当 show 不满足条件时，则从完全显示逐渐变为透明度为 0 的状态。

2. 使用动画 API

Vue 还提供了 JavaScript API 来实现更复杂的动画效果。在组件中使用 transition 组件来包裹元素，并设定 appear 属性为 true，以在初始渲染时应用动画，然后可以在 mounted 钩子函数中使用动画方法。

例如，在模板中添加以下代码：

<transition name="custom" appear>
  <p v-if="show">Hello World</p>
</transition>

其中，name 属性指定了过渡名称，可以自定义。appear 属性用来在初始渲染时应用动画。

然后，在组件的 mounted 钩子函数中添加以下代码：

mounted() {
  const el = this.$el.querySelector('p');
  el.style.opacity = 0;
  setTimeout(() => {
    el.style.opacity = 1;
  }, 1000);
}

这里使用了 querySelector 方法来获取需要添加动画的元素，然后通过设置 opacity 属性来实现动画效果。

以上就是在 Vue 中使用动画的两种方法。需要注意的是，CSS 过渡和动画 API 都需要通过钩子函数来触发动画，因此需要根据实际情况选择适合的方法来使用。