Vue路由切换时的左滑和右滑效果示例

如何实现Vue路由切换时的左滑和右滑效果，因为原作者ustbhuangyi老师的两个慕课项目中都没有这样的效果，于是突发奇想要做这个功能，看了看QQ、微信都没这样的效果，最后发现SegmentFault(思否) 和掘金两个app都有这样的效果，就以此为参考开始做了。

transition

首先看看官网淡入淡出动画的例子：

<div id="demo">
 <button v-on:click="show = !show">
  Toggle
 </button>
 <transition name="fade">
  <p v-if="show">hello</p>
 </transition>
</div>

new Vue({
 el: '#demo',
 data: {
  show: true
 }
})

.fade-enter-active, .fade-leave-active {
 transition: opacity .5s;
}
.fade-enter, .fade-leave-to {
 opacity: 0;
}

左右切换效果

CSS部分

我们要实现的是左右切换的效果，所以要定义两种动画（左滑和右滑）

.transitionBody{
 transition: all 0.15s ease; /*定义动画的时间和过渡效果*/
}

.transitionLeft-enter,
.transitionRight-leave-active {
  -webkit-transform: translate(100%, 0);
  transform: translate(100%, 0);
   /*当左滑进入右滑进入过渡动画*/
}

.transitionLeft-leave-active,
.transitionRight-enter {
  -webkit-transform: translate(-100%, 0);
  transform: translate(-100%, 0);
}

HTML部分

这里的 keep-alive 是Vue的内置组件，能在组件切换过程中将状态保留在内存中，防止重复渲染DOM，我们要把它也包裹在transition标签内，否则页面将重新渲染，切换的动画也会卡顿

<transition :name="transitionName">
  <keep-alive>
      <router-view class="transitionBody"></router-view>
  </keep-alive>
</transition>

JS部分

在Vue组件中，data必须是一个函数，将对象 {transitionName: ‘transitionLeft'} 挂载到Vue实例中，然后我们可以监听路由的 to 和 from 来判断此时应该左滑还是右滑，来动态切换transition的name值。

export default {
 data() {
   return {
    transitionName: 'transitionLeft'
   };
 },
 watch: {
  '$route' (to, from) {
   const arr = ['/goods','/ratings','/seller'];
   const compare = arr.indexOf(to.path)>arr.indexOf(from.path);
   this.transitionName = compare ? 'transitionLeft' : 'transitionRight';
  }
 }
}

点击链接体验一下： https://zc95.github.io/demo/vue-sell

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持我们。

赞 (0)

相关推荐

  • Vue + Vue-router 同名路由切换数据不更新的方法

    在默认情况下, 同名路由之间的切换, 由于组件可以服用, 放在ready里获取数据, 是不会执行的, 有两种方法可以解决 注意: 该问题仅存在于 vue1 方法1: 将数据获取放到route.data下~ route: { data({to: {params: { page }}}) { return Promise.all([ this.getApi() ]).then(() => { }) } } 方法2: 设置route.canReuse = false, 强制组件不复用~ route:

  • vue移动端路由切换实例分析

    vue移动端路由切换实例分析

    在写移动端时,因为需要给页面做转场动画,便有了这次的研究 其中最主要的时以下两个问题: 浏览器导航栏的切换 IOS 上滑动切换时,会有两次页面的转场动画,一次自身滑动时进行的切换,随后触发我们设置的转场动画. 除了上面两个问题,其余的操作都是可以在页面内进行设置,基本都是可控的.主要就是解决上面两个问题. 可以看下实际写出来的效果:在线DEMO 1. 浏览器导航栏的切换 通过记录 历史记录 来比较判断前进还是后退 如下例子 A页面 -> B页面 -> C页面 假如我从 A页面到 B页面 再到C

  • vue2.0路由切换后页面滚动位置不变BUG的解决方法

    最近项目中遇到这样一个问题,vue切换路由,页面到顶端的滚动距离仍会保持不变. <a href="javascript:;" rel="external nofollow" class="btn btn01" @click="useRightNow">立即试用</a> <router-link class="db" to="/user">个人中心<

  • Vue路由切换时的左滑和右滑效果示例

    如何实现Vue路由切换时的左滑和右滑效果,因为原作者ustbhuangyi老师的两个慕课项目中都没有这样的效果,于是突发奇想要做这个功能,看了看QQ.微信都没这样的效果,最后发现SegmentFault(思否) 和掘金两个app都有这样的效果,就以此为参考开始做了. transition 首先看看官网淡入淡出动画的例子: <div id="demo"> <button v-on:click="show = !show"> Toggle <

  • Vue 路由切换时页面内容没有重新加载的解决方法

    第二次进入页面,页面路由参数已经改变,但是页面内容不会刷新. 问题原因:在组件mounted钩子中调用的刷新页面内容,但测试发现这个钩子没有被调用.后来发现App.vue中使用了<keep-alive>: <template> <div id="app"> <keep-alive> <router-view></router-view> </keep-alive> </div> </t

  • vue路由切换时取消之前的所有请求操作

    在main.js文件里 import router from 'router/'; import Vue from 'vue'; Vue.Cancel = []; router.beforeEach((to, from, next) => { while (Vue.Cancel.length > 0) { Vue.Cancel.shift()('cancel'); } next(); }) ajax文件 import Vue from 'vue'; import axios from 'ax

  • vue 路由切换过渡动效滑入滑出效果的实例代码

    vue 路由切换过渡动效滑入滑出效果的实例代码

    效果展示 css 滑入和滑出的动画 .twofade-enter {transform: translateX(100%);} .twofade-enter-active {transition: all 0.3s;position: absolute;height:100%;background:#ececec;} .twofade-leave-active {transition: all 0;transition-delay: 0.3s;position: absolute;} .twof

  • vue路由切换之淡入淡出的简单实现

    路由跳转的淡入淡出 在开发中有一种需求叫高端.大气.上档次.所以作为一个前端有责任让你的程序开起来更酷炫.可以在页面切换时我们加入一些动画效果,提升我们程序的动效设计 想让路由有过渡动画,需要在<router-view>标签的外部添加<transition>标签,标签还需要一个name属性 <transition name="fade" mode="in-out"> <router-view ></router-

  • 当vue路由变化时,改变导航栏的样式方法

    当我们需要做一个类似顶部 或 底部导航栏公共组件的时候,单击某个导航栏按钮,跳转到另一个组件, 并且改变导航栏按钮的样式,如果用<router-link to=""><router-link/> 跳转的时候,我们可以这样做, 改变router-link-active 的样式,它是路由path指向当前组件时系统自动生成的. 先看下效果: 贴上我的路由文件js export default new Router({ routes: [ { path: '/', co

  • Vue路由切换和Axios接口取消重复请求详解

    目录 前言 场景 解决方案 axios中如何取消请求 项目中封装使用 总结 参考 前言 在日常前端开发中, 经常会遇到频繁发起的重复请求, 会给服务器及网络造成不必要的压力, 可通过取消重复请求解决 场景 订单数据条件筛选查询 表单提交按钮频繁点击 路由页面切换请求未取消 解决方案 在每个请求发起的时候存储当前存储的标记在一个数组或Map中, 针对每个请求的时候在请求拦截中查询是否重复, 如果已重复则取消历史中重复的请求, 再发起当前请求, 如果没有重复, 则添加存储标记并正常请求, 已请求完成

  • Vue路由切换的两种方式示例详解

    目录 Vue路由切换的两种方式 1. 标签切换 1.1 <a>标签切换 1.2 路径切换 1.3 path切换 1.4 name切换(推荐) 2. js切换 Vue路由切换的两种方式 1. 标签切换 1.1 <a>标签切换 语法:<a href=“# + 路由路径”>标签内容</a> 例子: 路由规则为: const router = new VueRouter({ //路由对象数组 routes: [{ path: '/login', component:

  • Taro UI框架开发小程序实现左滑喜欢右滑不喜欢效果

    Taro 就是可以用 React 语法写小程序的框架,拥有多端转换能力,一套代码可编译为微信小程序.百度小程序.支付宝小程序.H5.RN等 摘要: 年后入职了一家新公司,与前同事交接完之后,发现公司有一个四端的项目(iOS,Android,H5,小程序),iOS和安卓都实现了左滑右滑的效果,而h5和小程序端没实现,询问得知前同事因网上没找到对应的插件,相关博客也特别少,所以没做就搁置下来了. 趁这段时间相对来说比较富裕,于是乎在网上也搜索了一下,发现确实很少,但是有人提到可以用小程序可拖动组件m

  • Vue路由监听实现同页面动态加载的示例

    Vue路由监听实现同页面动态加载的示例

    场景分析 在系统中一个模块有三个子模块. 业务数据中可以直接根据类型去区分这个三个子模块的归属. 通常情况下.我们是写在同一个模块中然后去选择业务类型. 但是业主要求,将这个拆分成三个菜单.用户根据自己的需求去选择需要使用的模块. 这个三个菜单使用的是同一张数据表. 所以我们肯定只写一个 list,add,edit页面的. 然后根据进入页面的路由来判断属于哪一个分类.并跳转指定分类的 新增,编辑, 和调用对应的列表接口页面 开发 由于三个模块使用的相同的页面.所以需要配置三份路由.并且做出页面区

随机推荐