圆月山庄资源网

Vue页面跳转动画效果的实现方法
网络编程 2024/12/22 佚名
3 2
圆月山庄资源网 Design By www.vgjia.com

前言

现如今移动端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"htmlcode">



<router-link :to="{name:'PointList', params: { userId: 123 }}">
 <i class="icon"><img src="/UploadFiles/2021-04-02/point.png">


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"htmlcode">



<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"color: #ff0000">







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 "htmlcode">



<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 "htmlcode">



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


总结


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


                                

                                

                                     

                                

                                    标签：
                                        
vue页面跳转方式,vue多页面路由跳转,vue实现页面跳转

                                     

                                
圆月山庄资源网 Design By www.vgjia.com

                            

                        

                        

                            

                                广告合作：本站广告合作请联系QQ：858582 申请时备注：广告合作（否则不回）

                                免责声明：本站文章均来自网站采集或用户投稿，网站不提供任何软件下载或自行开发的软件！
                                如有用户或公司发现本站内容信息存在侵权行为，请邮件告知！ 858582#qq.com
                            

                        

                        

                            
                            
                        

                        
                        
圆月山庄资源网 Design By www.vgjia.com
www.vgjia.com 圆月山庄资源网
139,976互联网资源
144,792高清电影
21,817无损音乐
631,128技术资源

《魔兽世界》大逃杀！60人新游玩模式《强袭风暴》3月21日上线

暴雪近日发布了《魔兽世界》10.2.6 更新内容，新游玩模式《强袭风暴》即将于3月21 日在亚服上线，届时玩家将前往阿拉希高地展开一场 60 人大逃杀对战。

艾泽拉斯的冒险者已经征服了艾泽拉斯的大地及遥远的彼岸。他们在对抗世界上最致命的敌人时展现出过人的手腕，并且成功阻止终结宇宙等级的威胁。当他们在为即将于《魔兽世界》资料片《地心之战》中来袭的萨拉塔斯势力做战斗准备时，他们还需要在熟悉的阿拉希高地面对一个全新的敌人──那就是彼此。在《巨龙崛起》10.2.6 更新的《强袭风暴》中，玩家将会进入一个全新的海盗主题大逃杀式限时活动，其中包含极高的风险和史诗级的奖励。

《强袭风暴》不是普通的战场，作为一个独立于主游戏之外的活动，玩家可以用大逃杀的风格来体验《魔兽世界》，不分职业、不分装备（除了你在赛局中捡到的），光是技巧和战略的强弱之分就能决定出谁才是能坚持到最后的赢家。本次活动将会开放单人和双人模式，玩家在加入海盗主题的预赛大厅区域前，可以从强袭风暴角色画面新增好友。游玩游戏将可以累计名望轨迹，《巨龙崛起》和《魔兽世界：巫妖王之怒 经典版》的玩家都可以获得奖励。

更新日志

友情链接

杰晶网络 DDR爱好者之家 桃源资源网 杰网资源 富贵资源网 南强小屋 铁雪资源网 幽灵资源网 万梅资源网 狼山资源网 白云岛资源网 昆仑资源网 相思资源网 明霞山资源网 内蒙古资源网 黑松山资源网 茶园资源网 饿虎岗资源网 大旗谷资源网 常春岛资源网 岱庙资源网 兴国资源网 快活林资源网 蝙蝠岛资源网 帝王谷资源网 白云城资源网 伏龙阁资源网 清风细雨楼 天枫庄资源网 圆月山庄资源网 无争山庄资源网 神水资源网 移花宫资源网 神剑山庄资源网 无为清净楼资源网 金钱帮资源网 丐帮资源网 华山资源网 极乐门资源网 小李飞刀资源网 凤求凰客栈 风云阁资源网 金狮镖局 鸳鸯亭资源网 千金楼资源网 更多链接