先简单介绍下 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 }