精华内容
下载资源
问答
  • 1.App.vue中添加export default {name: 'App',data(){return{animate: ""}},watch: {$route(to, from) {if (to.meta.tx > from.meta.tx) {this.animate= "right";} else {this.animate= "left";}}}}.right-enter-...

    1.App.vue中添加

    export default {

    name: 'App',

    data(){

    return{

    animate: ""

    }

    },

    watch: {

    $route(to, from) {

    if (to.meta.tx > from.meta.tx) {

    this.animate= "right";

    } else {

    this.animate= "left";

    }

    }

    }

    }

    .right-enter-active,

    .right-leave-active,

    .left-enter-active,

    .left-leave-active {

    transition: all 200ms;

    }

    .right-enter {

    transform: translate3d(-100%, 0, 0);

    }

    .right-leave-to {

    transform: translate3d(100%, 0, 0);

    }

    .left-enter {

    transform: translate3d(100%, 0, 0);

    }

    .left-leave-to {

    transform: translate3d(-100%, 0, 0);

    }

    展开全文
  • 页面刷新不影响路由记录路由懒加载,返回可记录滚动条位置前进后退的判断与路由路径规则无关支持任意基于Vue的UI框架demo手机扫码说明配套包含两个组件vue-route-transition 负责动画router-layout 负责页面排版。...

    vue-route-transition

    vue router 切换动画

    特性

    模拟前进后退动画

    基于css3流畅动画

    基于sessionStorage,页面刷新不影响路由记录

    路由懒加载,返回可记录滚动条位置

    前进后退的判断与路由路径规则无关

    支持任意基于Vue的UI框架

    demo

    手机扫码

    说明

    配套包含两个组件

    vue-route-transition 负责动画

    router-layout 负责页面排版。 主要是解决transform动画,position:fixed异常问题

    像往常一样使用

    npm i vue-route-transition --save

    main.js

    import RouteTransition from 'vue-route-transition'

    Vue.use(RouteTransition)

    App.vue

    // keepAlive默认true,开启缓存可以记录滚动条位置

    // 同时支持路由配置meta:{keepAlive:false} 关闭某个页面缓存

    页面,如果有吸附头部,或吸附底部元素的情况下才需要使用router-layout组件

    头部导航

    ...

    底部按钮

    如果存在子路由,需手动设置router-layout的id属性,滚动条定位作用。

    标签

    标签

    标签

    开源协议

    本项目基于 MIT 协议,请自由地享受和参与开源。

    展开全文
  • 最近致力于用户体验优化,因为需要实现类似APP页面切换的动画效果,百度google搜索资料不是很全,所以自己写文档,在实现效果的基础上,顺便恶补一波VueRouter及CSS过渡动画的知识点,欢迎有兴趣的朋友多多指教。...

    前言

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

    点单

    2.

    v 1.0

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

    总结

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

    展开全文
  • const history = window.sessionStoragehistory.clear()let historyCount = history.getItem('count') * 1 || 0history.setItem('/index', 0)router.beforeEach((to, from, next) => {const toIndex = history.ge...

    const history = window.sessionStorage

    history.clear()

    let historyCount = history.getItem('count') * 1 || 0

    history.setItem('/index', 0)

    router.beforeEach((to, from, next) => {

    const toIndex = history.getItem(to.path)

    const fromIndex = history.getItem(from.path)

    if (toIndex) {

    if (!fromIndex || parseInt(toIndex, 10) > parseInt(fromIndex, 10) || (toIndex === '0' && fromIndex === '0')) {

    store.commit('UPDATE_DIRECTION', { direction: 'forward' })

    } else {

    store.commit('UPDATE_DIRECTION', { direction: 'reverse' })

    }

    } else {

    ++historyCount

    history.setItem('count', historyCount)

    to.path !== '/index' && history.setItem(to.path, historyCount)

    store.commit('UPDATE_DIRECTION', { direction: 'forward' })

    }

    next()

    })

    const state = {

    direction: 'forward'

    }

    import { mapState } from 'vuex'

    export default {

    computed: {

    ...mapState({

    direction: state => state.common.direction

    })

    }

    }

    .pop-out-enter-active, .pop-out-leave-active, .pop-in-enter-active, .pop-in-leave-active {

    will-change: transform;

    transition: .38s ease-in-out, visibility .38s;

    height: 100%;

    width: 100%;

    top: 0;

    left: 0;

    right: 0;

    bottom: 0;

    position: absolute;

    -webkit-perspective: 1000;

    perspective: 1000;

    }

    .pop-out-enter {

    opacity: 0;

    transform: translate3d(-100%, 0, 0);

    }

    .pop-out-leave-active {

    opacity: 0;

    transform: translate3d(100%, 0, 0);

    }

    .pop-in-enter {

    opacity: 0;

    transform: translate3d(100%, 0, 0);

    }

    .pop-in-leave-active {

    opacity: 0;

    transform: translate3d(-100%, 0, 0);

    }

    展开全文
  • 1.如何编写自己的路由切换动画?a:路由切换我们可以各router-view 上套一个transition动画b:编写自己想要的动画.slide-left-enter{opacity:0;transform:translate3d(100%,0,0)}.slide-left-enter-active{transition:...
  • vue 路由跳转 动画 超详细

    千次阅读 2019-10-16 11:57:36
    vue 提供了transition用来写动画 首先第一步 我们在App.vue 中 用transition把 router-view 包起来 <transition :name="SkipSwitchName"> <router-view ></router-view> </transition> ...
  • 条件渲染 (使用v-if)条件展示 (使用v-show)动态组件组件根节点这里是一个典型的例子:Togglehellonew Vue({el: '#demo',data: {show: true}}).fade-enter-active, .fade-leave-active {transition: opacity .5s}....
  • vue路由跳转动画切换左右

    千次阅读 2018-07-13 14:16:49
    一、重点,给VueRoute添加一个goBack方法,用于记录路由的前进后退状态 this.isBack = true VueRouter.prototype.goBack = function () { this.isBack = true window.history.go(-1)} 二丶监听路由变化(在路由...
  • 只有首次刷新的时候更新,再切换页面没有动画效果 ``` <router-view></router-view> import animate from 'animate.css' export default { name:'app', data() { return { } }, ...
  • 要修改一下路由,将用户名作为参数传进用户个人中心页面router/index.js{path: '/user/:username',name: '个人中心',component: User,}在导航栏里,我用编程式路由实现路由跳转methods: {go () {this.$router.push({...
  • 关于VUE路由跳转动画遇到的坑

    千次阅读 2019-04-26 17:59:11
    首先描述一下我遇到的跳转动画坑 1.在动画滑动时,最上面的header元素没有置顶,导致最后动画完成时突然向上移动! 一开始我以为是animate的问题,改用原生的动画,我发现还是存在这个问题,后来我无意中发现<...
  • vue-router实现webApp切换效果演示效果快速集成1.复制PageTransittion.vue到项目目录。2.修改router配置。Router.prototype.goBack = function () {this.isBack = truewindow.history.go(-1)}const router = new ...
  • 过渡动效提供了transition的封装组件,添加过渡动画,通过添加或删除css类名来实现。过渡的css类名:v-enter 进入过渡的开始状态v-enter-active 进入活动状态v-enter-to 进入的结束状态v-leave 离开过渡的开始...
  • this.$router.go(-1) : this.$router.push('/') } } } mindset 一开始学习Vue的时候我有点晕头转向: 一下子在这个组件里写,一下子又跳到另一个组件里,但是渐渐地通过整理、回顾,便可以看清里面的逻辑关系了。...
  • 前两篇,我们讲到了vue 的一些简单的语法和概念,接下来我会带大家结合vue 项目的形式去学习更多vue 的相关知识,首先你要确保你的电脑上已经安装了node.js ,如果还没有的话,请自行到官网进行下载安装,都是很简单的事情...
  • 上一下原先的代码,实现路由跳转&页面动画切换,没做页面缓存,每个页面都要刷新(App.vue)*{margin: 0; padding: 0;}export default {data() {return {transitionName: ""}},watch: {'$route'() {if(window.$is...
  • vue 路由跳转几种方法

    2019-06-13 10:17:07
    vue 路由跳转几种方法 1.router-link 【实现跳转最简单的方法】 <router-link to='需要跳转到的页面的路径> 类似于a 的标签 div和css样式略 <li > <router-link to="keyframes">点击验证动画...
  • 左右切换上边的菜单栏的时候需要根据菜单栏是左侧的还是右侧的让主体里面的内容向左或者向右过度过来,这就用到了vue项目路由跳转添加过渡动画的功能,不得不说,做这个动画还是很方便的: 看路由: //index.js { ...
  • NProgress 案例
  • Vue项目中使用animate转场动画加入一些简单且花哨的页面切换效果 第一步 引入css样式 在vue项目中的public文件夹里的index.html引入链接,复制即可: <link href=...

空空如也

空空如也

1 2 3 4 5 6
收藏数 117
精华内容 46
关键字:

vue路由跳转动画

vue 订阅