vue 常用动画
引言
来源: https://juejin.cn/post/6844903638402334734
Vue 常用 transition 动画效果记录
先简单介绍下 transition 标签的使用方法
主要用于 v-show, v-if 或 router-view 的进出场动画
- 模板
<transition name="name" >
<div v-show="show" ></div>
<div v-if="show" ></div>
<router-view/>
</transition>
复制代码- CSS
// 定义进入前与离开后状态
.name-enter, .name-leave-to {
...
}
// 定义离开前与进入后状态
.name-leave, .name-enter-to {
...
}
// 定义进出过程
.name-enter-active, .name-leave-active {
transition: all .5s
}
复制代码1. fade 淡化进出
.fade-enter, .fade-leave-to {
opacity: 0
}
.fade-leave, .fade-enter-to {
opacity: 1
}
.fade-enter-active, .fade-leave-active {
transition: all .2s
}
复制代码2. scale 缩放进出
.scale-enter, .scale-leave-to {
transform: scale(0)
}
.scale-leave, .scale-enter-to {
transform: scale(1)
}
.scale-enter-active, .scale-leave-active {
transition: all .2s
}
复制代码3. left 左侧进出 (通常用于左侧边栏)
.left-enter, .left-leave-to {
transform: translate3d(-100%, 0, 0)
}
.left-leave, .left-enter-to {
transform: translate3d(0, 0, 0)
}
.left-enter-active, .left-leave-active {
transition: all .2s
}
复制代码4. right 右侧进出 (通常用于右侧边栏)
.right-enter, .right-leave-to {
transform: translate3d(100%, 0, 0)
}
.right-leave, .right-enter-to {
transform: translate3d(0, 0, 0)
}
.right-enter-active, .right-leave-active {
transition: all .2s
}
复制代码5. top 顶部进出 (通常用于提示弹窗)
.top-enter, .top-leave-to {
transform: translate3d(0, -100%, 0)
}
.top-leave, .top-enter-to {
transform: translate3d(0, 0, 0)
}
.top-enter-active, .top-leave-active {
transition: all .2s
}
【推荐】国内首个AI IDE，深度理解中文开发场景，立即下载体验Trae
【推荐】编程新体验，更懂你的AI，立即体验豆包MarsCode编程助手
【推荐】抖音旗下AI助手豆包，你的智能百科全书，全免费不限次数
【推荐】轻量又高性能的 SSH 工具 IShell：AI 加持，快人一步
· winform 绘制太阳，地球，月球 运作规律
· AI与.NET技术实操系列（五）：向量存储与相似性搜索在 .NET 中的实现
· 超详细：普通电脑也行Windows部署deepseek R1训练数据并当服务器共享给他人
· 【硬核科普】Trae如何「偷看」你的代码？零基础破解AI编程运行原理
· 上周热点回顾（3.3-3.9）