0
点赞
收藏
分享

微信扫一扫

补充-vue动画

舟海君 2022-02-22 阅读 58

当vue中,显示隐藏,创建移除,一个元素或者一个组件的时候,可以通过transition实现动画。

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

.fade-leave {
    opacity: 1
}
.fade-leave-active {
    transition: all 1s;
}
.fade-leave-to {
    opcaity: 0
}

进入(显示,创建)

  • v-enter 进入前 (vue3.0 v-enter-from)
  • v-enter-active 进入中
  • v-enter-to 进入后

离开(隐藏,移除)

  • v-leave 进入前 (vue3.0 v-leave-from)
  • v-leave-active 进入中
  • v-leave-to 进入后

多个transition使用不同动画,可以添加nam属性,name属性的值替换v即可。

举报

相关推荐

vue补充

Vue基础补充

【Vue】动画

Vue补充总结(一)

Vue 过渡动画

0 条评论