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配置可以直接传入,也可以先定义后使用
 //每个路由都应该映射一个组件,其中component可以是通过Vue.extend()创建的组件构造器,
 或者只是一个组件配饰对象。(今天暂时不考虑嵌套路由的情况)
 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

字符串(string)。等于当前路由对象的路径,会被解析为绝对路径,
如:http://example.com/#/login?name=aa,this.$route.path
,输出“/login”,即对应上面1中路由匹配时routes配置中的“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
//此时路由为:http://example.com/#/login?name=userName。

5、$route.redirectedFrom

字符串(string)。重定向来源:

如:{ path: '*',redirect: {name: 'hello'}}
 此时访问不存在的路由http://example.com/#/a会重定向到hello,
在hello访问this.$route.redirectedFrom; 输出“/a”。

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)
 this.transitionName = toDepth > fromDepth ? 'fold-left' : 'fold-right'
 }
 },

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完成之后移除。
this.transitionName = toDepth > fromDepth ? 'fold-left' : 'fold-right'

在“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个大知识点,当然其中还包括许多扩展的知识点,学无止境,需慢慢深入挖掘…

总结

以上就是这篇文章的全部内容了,希望本文的内容对大家的学习或者工作具有一定的参考学习价值,如果有疑问大家可以留言交流,谢谢大家对我们的支持。

(0)

相关推荐

  • vue实现app页面切换动画效果实例

    因为需要实现类似APP页面切换的动画效果,百度google搜索比较少资料,所以自己写文档,希望对您有用 在router/index.js import Vue from 'vue' import Router from 'vue-router' Vue.use(Router) Router.prototype.goBack = function () { this.isBack = true window.history.go(-1) } const router = new Router({

  • 基于Vue、Vuex、Vue-router实现的购物商城(原生切换动画)效果

    效果图如下所示: 在线地址: github.czero.cn/fancy 点击下载安卓apk安装包 源码地址: github.com/czero1995/f- 项目主架构 使用的库 vue-cli (vue+webpack脚手架) vue-router(路由跳转) vuex(状态管理) axios(数据请求) mock.js(模拟后台数据) vue-touch(手势判断) fastclick(解决移动端浏览器 300 毫秒点击延迟问题) vue-lazyload(图片懒加载) swiper(轮播

  • Vue实现移动端页面切换效果【推荐】

    在子页面把整个页面做绝对定位,覆盖整个屏幕,子父页面将 router-view 用  transition 套起来,并加上过渡动画就可以啦. 代码: <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, init

  • 基于Vue实现页面切换左右滑动效果

    基于Vue的页面切换左右滑动效果,具体内容如下 HTML文本页面: <template> <div id="app> <transition :name="direction" mode="out-in"> <!--动态获得transition 的name值--> <router-view class="app-view" wechat-title></router-vi

  • Vue.js实现微信过渡动画左右切换效果

    前言 在awesomes上寻找移动端框架的时候意外发现了vux的页面切换效果,后面由于其他考虑没有选用vuex但是这个切换效果确实感觉很有新意,也就看了下源码,这里贴一份备用. 需要用到的技术栈:Vue+Vuex 先看看效果图 过渡动画 示例代码 //app.vue <transition :name="'vux-pop-' + (direction === 'forward' ? 'in' : 'out')"> <keep-alive> <router-

  • vue-router之实现导航切换过渡动画效果

    过渡动效 提供了transition的封装组件,添加过渡动画,通过添加或删除css类名来实现. 过渡的css类名: v-enter 进入过渡的开始状态 v-enter-active 进入活动状态 v-enter-to 进入的结束状态 v-leave 离开过渡的开始状态 v-leave-active 离开活动状态 v-leave-to 离开结束状态 过渡模式: in-out 先进后出 out-in 先出后进 用法: 做一个淡隐淡出效果 把想要运动的元素放到<transition></tra

  • Vue页面跳转动画效果的实现方法

    前言 现如今移动端APP对用户体验方面的要求越来越高了,最近致力于用户体验优化,因为需要实现类似APP页面切换的动画效果,百度google搜索资料不是很全,所以自己写文档,在实现效果的基础上,顺便恶补一波VueRouter及CSS过渡动画的知识点,欢迎有兴趣的朋友多多指教. vue-router是Vue.js官方的路由插件,它和vue.js是深度集成的,适合用于构建单页面应用.vue的单页面应用是基于路由和组件的,路由用于设定访问路径,并将路径和组件映射起来.传统的页面应用,是用一些超链接来实现

  • Vue仿微信app页面跳转动画效果

    10:14:11独立开发者在开发移动端产品时,为了更高效,通常会使用Web技术来开发移动端项目,可以同时适配Android.iOS.H5,稍加改动还可适配微信小程序. 在使用Vue.js开发移动端页面的时候,默认的组件转场效果过于生硬,根本就没有动画效果.于是我用Vue提供的组件过渡功能,写了个仿微信app页面跳转的动画,以提高用户体验. 废话不多说,直接上图 在600元骁龙632安卓测试机效果流畅. 代码量很少,已上传至GitHub https://github.com/YellowDoing

  • vue中页面跳转拦截器的实现方法

    本文主要给大家介绍的是关于vue页面跳转拦截器的相关内容,分享出来供大家参考学习,下面话不多说了,来一起看看详细的介绍: 登录拦截逻辑 第一步:路由拦截 首先在定义路由的时候就需要多添加一个自定义字段requireAuth,用于判断该路由的访问是否需要登录.如果用户已经登录,则顺利进入路由, 否则就进入登录页面.在路由管理页面添加meta字段 import Vue from 'vue' import Router from 'vue-router' Vue.use(Router) const r

  • vue路由前进后退动画效果的实现代码

    vue-route-transition vue router 切换动画 特性 模拟前进后退动画 基于css3流畅动画 基于sessionStorage,页面刷新不影响路由记录 路由懒加载,返回可记录滚动条位置 前进后退的判断与路由路径规则无关 支持任意基于Vue的UI框架 demo   手机扫码 在线预览 说明 配套包含两个组件 vue-route-transition 负责动画 router-layout 负责页面排版. 主要是解决transform动画,position:fixed异常问题

  • Vue页面跳转传递参数及接收方式

    最近接触了vue项目,这里记录一下vue跳转到下一页面携带参数的两种方式. 典型应用场景:列表页跳转到详情页 一.配置路由 文件路径:src/router/config.php import Vue from 'vue' import Router from 'vue-router' import classify from '.././components/classify/classify.vue' import classifyChild from '.././components/cla

  • Android Activity跳转动画效果

    Activity的跳转动画在5.0的时候做了一个重大的突破,下面来看一下吧 1.5.0之前的overridePendingTransition 相信大家对OverridePendingTransition还是很熟悉的,使用方法也是很简单就是 //fade_in是第二个界面的进入动画,fade_out是第一个界面退出动画,不想动画传入0  overridePendingTransition(R.anim.fade_in,R.anim.fade_out); fade_in : <?xml versi

  • vue页面跳转后返回原页面初始位置方法

    vue页面跳转到新页面之后,再由新页面返回到原页面时候若想返回调出原页面的初始位置,怎么来解决这个问题呢?首先我们应该在跳出页面时候记录下跳出的scrollY,返回原页面的时候在设置返回位置为记录下的scrolly即可,scrolly我用的是vuex状态管理器来保存的.整个环境是基于vue-cli搭建的 一.main.js里面配置vuex //引用vuex import Vuex from 'vuex' Vue.use(Vuex) 二.main.js里面vuex状态管理 var store =

  • vue页面切换过渡transition效果

    首先得有你想要的过渡效果css代码: .vux-pop-out-enter-active, .vux-pop-out-leave-active, .vux-pop-in-enter-active, .vux-pop-in-leave-active { will-change: transform; transition: all 500ms; height: 100%; position: absolute; backface-visibility: hidden; perspective: 1

  • vue页面跳转实现页面缓存操作

    业务需求 打野在A页面野区进行一波骚操作打了一只蓝爸爸,然后点击导航栏跑到B页面的野区秀操作打了一只红爸爸,然后他又回到A野区,希望A野区还是只有一只蓝爸爸被打的状态,其他野没被偷 第一步 在路由里面设置需要缓存的页面 第二步 使用keep-alive属性包裹需要缓存的页面使用v-if判断,为true的是需要缓存的,false是不需要缓存的 第三步 在需要缓存的页面设置导航钩子,在A野区离开时将值设置为false保证离开当前野区不被偷 第四步 在其他野区浪一波离开时设置为true,保证回到A野区

  • vue 页面跳转的实现方式

    一.this.$router.push() 1.vue <template> <div id='test'> <button @click='goTo()'>点击跳转4</button> </div> </template> 2.script //跳转前页面传参数: goTo(item) { //storageData中数据用于跳转到下一个页面之后,进行返回时能够返回到跳转之前的页面 let storageData = { searc

随机推荐