Vue页⾯跳转动画效果的实现⽅法
前⾔
现如今移动端APP对⽤户体验⽅⾯的要求越来越⾼了，最近致⼒于⽤户体验优化，因为需要实现类似APP页⾯切换的动画效果，百度google搜索资料不是很全，所以⾃⼰写⽂档，在实现效果的基础上，顺便恶补⼀波VueRouter及CSS过渡动画的知识点，欢迎有兴趣的朋友多多指教。
vue-router是Vue.js官⽅的路由插件，它和vue.js是深度集成的，适合⽤于构建单页⾯应⽤。vue的单页⾯应⽤是基于路由和组件的，路由⽤于设定访问路径，并将路径和组件映射起来。传统的页⾯应⽤，是⽤⼀些超链接来实现页⾯切换和跳转的。在vue-router单页⾯应⽤中，则是路径之间的切换，也就是组件的切换。
写在前⾯的思考
如何匹配到相应需要跳转的页⾯？
如何判断是“前进”还是“后退”⽽后使⽤不同的动画⽅式？
如何对不同的跳转设置动画效果？
实现过程
⼀、vue路由匹配
创建vue实例，匹配路由。
⽤Vue.js + Vue Router创建单页应⽤，是⾮常简单的。使⽤Vue.js，我们可以通过组合组件来组成应⽤程序，将Vue Router
添加进来之后，我们需要做的是，将组件(components)映射到路由(routes)，然后告诉Vue Router 在哪⾥渲染它们。
import Vue from 'vue'
import Router from 'vue-router'
Vue.use(Router)
//如果使⽤模块化机制编程，导⼊Vue和VueRouter，就需要调⽤Vue.use(Router)
接下来就可以进⾏路由组件的映射：
(路由)组件的定义可以⾃⾏定义，当然，为了践⾏模块化组件化思想，多是从其他⽂件import进来。以下以简单的“登录->主页->点单->结算”四个页⾯的交互为例：
import Login from '@/components/login'
import Index from '@/components/index'
import PointList from '@/components/pointList/pointList'
import SettLement from '@/components/pointList/settlement'
//创建router实例，然后传⼊‘routes'配置
export default new Router({
//routes配置可以直接传⼊，也可以先定义后使⽤
js控制css3动画触发//每个路由都应该映射⼀个组件，其中component可以是通过d()创建的组件构造器，
或者只是⼀个组件配饰对象。(今天暂时不考虑嵌套路由的情况)
routes: [
{
path: '/', // 登录
name: 'Login',
component: Login
},
{
path: '/index', // 主页
name: 'Index',
component: Index
},
{
path: '/pointList', // 点单
name: 'PointList',
component: PointList
},
{
path: '/settLement', // 结算
name: 'SettLement',
component: SettLement
}
]
})
⼆、路由跳转 $router
组件路由除了使⽤全局组件 router-link 来实现点击跳转(相当于按钮)外，还可以使⽤组件本⾝具有的⼀个实例对象$router及其⼀些属性来达到⽬标。
$router 是VueRouter的⼀个实例对象，相当于⼀个全局的路由器对象。在Vue实例内部，你可以通过$router访问路由实例，⾥⾯含有很多属性和⼦对象，例如history对象，经常⽤到的跳转链接就可以调⽤
this.$router.push，this.$router.push会往history栈中添加⼀个新记录。
声明式编程式
<router-link :to="..."router.push(...)
点击等同于调⽤ router.push(...)
(...)该⽅法的参数可以是⼀个字符串，或者⼀个描述地址的对象：
// 字符串
router.push('home')
// 对象
router.push({ path: 'home' })
// 命名的路由
router.push({ name: 'user', params: { userId: 123 }})
// 带查询参数，变成 /register?plan=private
router.push({ path: 'register', query: { plan: 'private' }})
组件路由跳转实例：
1.
<router-link :to="{name:'PointList', params: { userId: 123 }}">
<i class="icon"><img src="../assets/point.png" alt=""></i>
<span>点单</span>
</router-link>
2.
<footer class="version" @click="goPage('Author')">v 1.0</footer>
//Js：
methods: {
goPage(url, param) {
this.$router.push({ name: url });
}
}
三、vue路由对象$route(只读)
在使⽤了vue-router的应⽤中，路由对象会被注⼊每个组件中，赋值为this.$route，并且当路由切换时，路由对象会被更新。所以route相当于当前正在跳转的路由对象，可以从⾥⾯获取name,path,params,query等，即包含了当前URL解析得到的信息，还有URL匹配到的路由记录。
路由对象暴露了以下属性(常见)：
1、$route.path
2、$route.name
字符串(string)。有时候，通过⼀个名称来标识⼀个路由显得更加⽅便，特别是在链接⼀个路由，或者是执⾏⼀些跳转的时候。同样，这⾥的name也对应了routes配置中给某个路由设置名称的name值：
要链接到⼀个命名路由，可以给router-link的to属性传⼀个对象：
<router-link :to="{name:'Order', params: { userId: 123 }}">
</router-link>
⽤在调⽤router.push()中也是⼀回事：
this.$router.push({ name: 'Order', params: { userId: 123 }})
3、$route.params
对象(object)。路由跳转携带参数：
this.$router.push({ name: 'Order', params: { userId: 123 }})
console.log(this.$route.params.userId); //123
4、$route.query
对象(object)。可访问携带的查询参数：
this.$router.push({name: 'login', query:{name: 'userName'}});
this.$route.query.name; //you
//此时路由为:example/#/login?name=userName。
5、$directedFrom
字符串(string)。重定向来源：
6、$route.matched
数组(array)。当前路由下路由声明的所有信息，从⽗路由(如果有)到当前路由为⽌。
7、$route.hash
字符串(string)。当前路径的hash值。
四、vue监听$route的⽅式
watch：{‘$route' (to, from) {}}
route 的变化。watch中监听的对象默认回调函数中的参数值就是newVal,oldVal。作为 $route 属性来说当然也就是 to 和 from 的概念了。
Vue⽤router.push(传参)跳转页⾯，参数改变，在跳转后的路由观察路由变化，进⾏页⾯刷新，可对“from->to”的过程设置动画效果。
该功能的难点就在于怎样获取“上⼀页”和“下⼀页”，即怎样分辨是“前进”还是“后退”？
例：
// watch $route 决定使⽤哪种过渡
watch:{
'$route' (to, from) {
//此时假设从index页⾯跳转到pointList页⾯
console.log(to); // "/pointList"
console.log(from); // “/index”
const routeDeep = ['/', '/index','/pointList', '/settLement'];
const toDepth = routeDeep.indexOf(to.path)
const fromDepth = routeDeep.indexOf(from.path)
}
},
to、from是最基本的路由对象，分别表⽰从(from)某个页⾯跳转到(to)另⼀个页⾯,to.path（表⽰要跳转到的路由地
址），from.path同理。
定义routeDeep数组，将路由⽬录按层级依次排序(暂不考虑嵌套路由的情况)，复杂单页应⽤⾥，同⼀层级（如同⼀页⾯上的多个导航按钮）顺序随意，然后依次排列每个导航的下⼀页、下下页…即保证每个“上⼀页”在“下⼀页”前⾯。
总结下来就是：按照routeDeep数组⾥定义的路由⽬录的顺序，“toDepth > fromDepth”表⽰“上⼀页”跳转到“下⼀页”，同理可由此判断是“前进”还是“后退”。
五、Vue2.0中transition组件的使⽤
<transition :name="transitionName">
<router-view class="view app-view"></router-view>
</transition>
transition中有name属性⽤于替换vue钩⼦函数中的类名。
transition中只能有⼀个⼦元素并且该⼦元素需要有v-show或者v-if来控制是否显⽰。
过渡CSS类名
transition中的name属性⽤于替换 vue钩⼦函数中的类名transitionName-
transitionName-enter: 定义进⼊过渡的开始状态。在元素被插⼊时⽣效，在下⼀个帧移除。
transitionName-enter-active: 定义进⼊过渡的结束状态。在元素被插⼊时⽣效，在transition/animation完成之后移除。
transitionName-leave：定义离开过渡的开始状态。在离开过渡被触发时⽣效，在下⼀个帧移除。
transitionName-leave-active: 定义离开过渡的结束状态。在离开过渡被触发时⽣效，在transition/animation完成之后移除。
在“watch $route”中，判断页⾯跳转的“前进”和“后退”时，决定⽤不同的过渡效果（fold-left还是fold-right）。
六、animation、transform动画效果实现
在上⼀个主题中，判断页⾯跳转路径之后，为两种跳转的transition设置不同的类名“fold-left”、“fold-right”。
然后在CSS中，为两种类名设置不同的动画效果(这⾥以“左滑动”和“右滑动”为例)：
.fold-left-enter-active {
animation-name: fold-left-in;
animation-duration: .3s;
}
.fold-left-leave-active {
animation-name: fold-left-out;
animation-duration: .3s;
}
.fold-right-enter-active {
animation-name: fold-right-in;
animation-duration: .3s;
}
.fold-right-leave-active {
animation-name: fold-right-out;
animation-duration: .3s;
}
animation 属性是⼀个简写属性，⽤于设置六个动画属性：
值描述
animation-name规定需要绑定到选择器的 keyframe 名称。
animation-duration规定完成动画所花费的时间，以秒或毫秒计。
animation-timing-function规定动画的速度曲线。
animation-delay规定在动画开始之前的延迟。
animation-iteration-count规定动画应该播放的次数。
animation-direction规定是否应该轮流反向播放动画。
@keyframes fold-left-in {
0% {
transform: translate3d(100%, 0, 0);
}
100% {
transform: translate3d(0, 0, 0);
}
}
@keyframes fold-left-out {
0% {
transform: translate3d(0, 0, 0);
}
100% {
transform: translate3d(-100%, 0, 0);
}
}
根据CSS3 @keyframes规则，创建动画。创建动画的原理即将⼀套CSS样式逐渐变化为另⼀套样式。在动画过程中，能够多次改变这套CSS样式。可以“百分⽐”来规定改变发⽣的时间，或者通过关键词“from”和“to”，等价于“0%”(动画的开始时间)
和“100%”(动画的结束时间)。⼀般为了获得最佳的浏览器⽀持，应该始终定义0%和100%选择器。
transform属性向元素应⽤2D或3D转换。该属性允许我们对元素进⾏旋转、缩放、移动或倾斜。translate3d(x,y,z)定义3D转换，如transform：translate3d(100%, 0, 0)只改变了x的值，即代表横向左滑动，同理可相应推出其他情况。
总结
以上就是vue页⾯跳转动画效果功能实现的6个步骤，即这个功能中所含括的6个⼤知识点，当然其中还包括许多扩展的知识
点，学⽆⽌境，需慢慢深⼊挖掘…
总结
以上就是这篇⽂章的全部内容了，希望本⽂的内容对⼤家的学习或者⼯作具有⼀定的参考学习价值，如果有疑问⼤家可以留⾔交流，谢谢⼤家对的⽀持。

版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198，我们将在24小时内删除。