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:离开动画的结束状态。

posted @ 2022-11-20 23:04  Dollom  阅读(41)  评论(0)    收藏  举报