1. 前言
实际还是脚手架项目用的多
脚手架里面的 转场动画 路由动画简单写几个
这里既然使用脚手架了, 创建项目的时候就不要默认了
自己定义 选择
vue依赖vuexroutercss,eslint相关会自动生成一些目录和基础文件 比较方便
2.常见渐变过渡 准备
渐变页面过渡应该是最直接的一种动效。
可以通过修改元素的透明度来实现
总共有 3 种过渡模式：
1.default：淡入和淡出过渡同时发生
2.in-out：新元素首先淡入。然后当前元素淡出。
3.out-in：当前元素先淡出。然后新元素开始淡入。
为提供了几个 CSS 类，它们能够在动画周期中被动态添加或删除。
v-enter-from / v-leave-from: 过渡的初始状态，过度开始后将其删除
v-enter-active / v-leave-active: 过渡的激活状态
v-enter-to / v-leave-to: 过渡的结束状态
3. 第一种 渐变透明
样式
.fade-enter-active, .fade-leave-active { transition: opacity 0.5s ease; } .fade-enter-from, .fade-leave-to { opacity: 0; }
直接脚手架 App.vue玩吧
<template> <div id="app"> <div id="nav"> <router-link to="/">Home</router-link> | <router-link to="/about">About</router-link> </div> <transition name="fade" mode="out-in"> <router-view /> </transition> </div> </template>
4. 右侧离场，左侧入场 动画
组件准备个样式 背景选择自己喜欢的
.wrapper { width: 100%; min-height: 50vh; background-color: greenyellow; }
使用动画
<transition name="slide-right"> <router-view /> </transition>
动画样式
.slide-right-leave { transform: translate(0, 0); } .slide-right-leave-active, .slide-right-enter-active { transition: all 0.7s; position: absolute; } .slide-right-leave-to { transform: translate(100%, 0); } .slide-right-enter { transform: translate(-100%, 0); } .slide-right-enter-to { transform: translate(0, 0); }
5.左侧离场，右侧入场 动画
组件加个背景色 效果更佳
.wrapper { width: 100%; min-height: 50vh; background-color: orange; }
路由
<transition name="slide-left"> <router-view /> </transition>
动画样式
.slide-left-leave { transform: translate(0, 0); } .slide-left-leave-active, .slide-left-enter-active { transition: all 0.7s; /* 为了保证组件切换动画时，两个组件重叠显示，在动画持续时间将做动画的组件根元素设置为绝对行为 */ position: absolute; } .slide-left-leave-to { transform: translate(-100%, 0); } .slide-left-enter { transform: translate(100%, 0); } .slide-left-enter-to { transform: translate(0, 0); }
6. 缩放动画
![FNB`@`M]GP]~KC3$6Q16D03.png](https://ucc.alicdn.com/pic/developer-ecology/a27513dc22c543488f27352401a28c9f.png?x-oss-process=image/resize,w_1400/format,webp "FNB`@`M]GP]~KC3$6Q16D03.png")
注意这个
mode
<transition name="scale" mode="out-in"> <router-view /> </transition>
动画
.scale-enter-active, .scale-leave-active { transition: all 0.5s ease; } .scale-enter-from, .scale-leave-to { opacity: 0; transform: scale(0.9); }
7.组合过渡
过渡+缩放
<transition name="scale-slide"> <router-view /> </transition>
动画样式
.scale-slide-leave { transform: translate(0, 0); } .scale-slide-enter-active, .scale-slide-leave-active { position: absolute; transition: all 1s ease; } .scale-slide-enter { transform: translate(-100%, 0) scale(0.1); } .scale-slide-enter-to { transform: translate(0, 0) scale(1); } .scale-slide-enter-from, .scale-slide-leave-to { opacity: 0; transform: translate(100%, 0) scale(0.1); }
8. 后续
抛砖引玉
更多动画等你探究 玩起来
应该考虑 放入个动画 能看到特性
