vue中控制组件过渡动画

基本用法

首先先要给 组件添加 自定义名字

<button @click="show = !show">Toggle</button>
<Transition name="自定义名称">
  <p v-if="show">hello</p>
</Transition>

css样式需要对 Transition 进行绑定

.自定义名称-enter-active,
.自定义名称-leave-active {
  transition: opacity 0.5s ease;
}
​
.自定义名称-enter-from,
.自定义名称-leave-to {
  opacity: 0;
}

Transition的css用法

1. v-enter-from：进入动画的起始状态。

2. v-enter-active：进入动画的生效状态。

3. v-enter-to：进入动画的结束状态。

4. v-leave-from：离开动画的起始状态。

5. v-leave-active：离开动画的生效状态。

6. v-leave-to：离开动画的结束状态。