讲vue动画✧(≖ ◡ ≖✿)~

最新推荐文章于 2023-10-17 01:44:01 发布

三舟木

最新推荐文章于 2023-10-17 01:44:01 发布

阅读量75

点赞数 1

分类专栏： vue js 前端文章标签：动画 vue.js html5

本文链接：https://blog.csdn.net/m0_58875280/article/details/120294491

版权

前端同时被 3 个专栏收录

59 篇文章 0 订阅

订阅专栏

42 篇文章 1 订阅

订阅专栏

vue

26 篇文章 0 订阅

订阅专栏

本文介绍了如何在Vue中使用transition实现元素或组件的动画效果，包括淡入淡出的离开和进入动画。通过设置不同的CSS类，如v-enter、v-enter-active、v-enter-to等，可以控制元素在进入和离开时的状态，实现平滑过渡。文章还提醒了当需要多个动画时，可通过设置name属性来区分不同的transition。

摘要由CSDN通过智能技术生成

写在前面

朋友们晚上好呀~今天讲vue的动画 ^_^。

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

如果元素或组件离开，完成一个淡出效果：

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

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

进入（显示，创建）
- 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 离开后