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

2024-09-29 16:50:12

在子页面把整个页面做绝对定位，覆盖整个屏幕，子父页面将 router-view 用 transition 套起来，并加上过渡动画就可以啦。

代码：

<!DOCTYPE html>
<html lang="en">
<head>
 <meta charset="UTF-8">
 <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0, user-scalable=no">
 <title>Document</title>
 <style>
  * { padding: 0; margin: 0; }
  html, body, #app { width: 100%; height: 100%; }
  .one { height: 100%; background-color: yellow; }
  .two { background-color: tomato; position: fixed; top: 0; bottom: 0; left: 0; right: 0; }
  .three { background-color: #ffe69f; position: fixed; top: 0; bottom: 0; left: 0; right: 0; }
  .v-enter-active, .v-leave-active { transition: all 0.3s; }
  .v-enter, .v-leave-to { transform: translateX(100%); }
 </style>
</head>
<body>
 <div id="app">
  <div class="one">
   <p>
    <router-link to="/foo">下一层</router-link>
   </p>
   <h1>第一层</h1>
  </div>
  <transition>
   <router-view></router-view>
  </transition>
 </div>

 <script src="https://unpkg.com/vue/dist/vue.js"></script>
 <script src="https://unpkg.com/vue-router/dist/vue-router.js"></script>
 <script>
  const Foo = {
   template: `
    <div class="whole-page two">
     <router-link to="/foo/bar">下一层</router-link>
     <router-link to="/">返回</router-link>
     <h1>第二层</h1>
     <transition>
      <router-view></router-view>
     </transition>
    </div>
   `
  }
  const Bar = {
   template: `
    <div class="whole-page three">
     <router-link to="/foo">返回</router-link>
     <h1>第三层</h1>
     <transition>
      <router-view></router-view>
     </transition>
    </div>
   `
  }
  const routes = [
   { path: '/foo', component: Foo, children: [ { path: 'bar', component: Bar } ] }
  ]
  const router = new VueRouter({ routes })
  const app = new Vue({ router }).$mount('#app')
 </script>
</body>
</html>

效果：

有一个问题需要注意一下，

我们知道，在应用transform属性的时候，fixed定位会变成absolute。

这里，页面转换的时候，就变成了相对translation定位。所以如果子页面中有绝对定位的话，移动的过程中页面会变形。

简单举个栗子，

<!DOCTYPE html>
<html lang="en">
<head>
 <meta charset="UTF-8">
 <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0, user-scalable=no">
 <title>Document</title>
 <style>
* { padding: 0; margin: 0; }
html, body, #app { width: 100%; height: 100%; }
#app { padding-top: 50px; }
.one { height: 100%; background-color: yellow;}
.two { background-color: tomato; position: fixed; top: 100px; bottom: 0; left: 0; right: 0; }.v-enter-active, .v-leave-active { transition: all 0.3s; }
.v-enter, .v-leave-to { transform: translateX(100%); }
header { height: 50px; background-color: #000; width: 100%; position: fixed; top: 0; color: #fff; line-height: 50px; text-align: center; }
.two header { top: 50px; background-color: #666; }
 </style>
</head>
<body>
 <div id="app">
  <header>我是一个标题</header>
  <div class="one">
   <p>
    <router-link to="/foo">下一层</router-link>
   </p>
   <h1>第一层</h1>
   <transition>
    <router-view></router-view>
   </transition>
  </div>
 </div>

 <script src="https://unpkg.com/vue/dist/vue.js"></script>
 <script src="https://unpkg.com/vue-router/dist/vue-router.js"></script>
 <script>
  const Foo = {
   template: `
    <div class="whole-page two">
     <router-link to="/">返回</router-link>
     <header>我也是一个标题</header>
     <h1>第二层</h1>
     <transition>
      <router-view></router-view>
     </transition>
    </div>
   `
  }
  const routes = [
   { path: '/foo', component: Foo }
  ]
  const router = new VueRouter({ routes })
  const app = new Vue({ router }).$mount('#app')
 </script>
</body>
</html>

看下效果：

OKOK，反正就是这种bug嘛。

解决办法就是，就是，尽量让页面fixed定位都是0 0 0 0，然后偏移用padding实现。

大概吧……反正我是这么解决的……

比如上面那个可以把CSS改成这样解决问题。

* { padding: 0; margin: 0; }
html, body, #app { width: 100%; height: 100%; }
#app { padding-top: 50px; }
.one { height: 100%; background-color: yellow;}
.two { background-color: tomato; position: fixed; top: 0; padding-top: 100px; bottom: 0; left: 0; right: 0; }.v-enter-active, .v-leave-active { transition: all 0.3s; }
.v-enter, .v-leave-to { transform: translateX(100%); }
header { height: 50px; background-color: #000; width: 100%; position: fixed; top: 0; color: #fff; line-height: 50px; text-align: center; z-index: 100; }
.two header { top: 50px; background-color: #666; }

嗯嗯还有一个问题，还有个滑动穿透的问题，（真开心! 这么多问题！

我再举个栗子，

<!DOCTYPE html>
<html lang="en">
<head>
 <meta charset="UTF-8">
 <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0, user-scalable=no">
 <title>Document</title>
 <style>
* { padding: 0; margin: 0; }
html, body, #app { width: 100%; height: 100%; }
.one { min-height: 100%; background-color: yellow;}
.two { background-color: tomato; position: fixed; top: 0; bottom: 0; left: 0; right: 0; }
.three { background-color: #ffe69f; position: fixed; top: 50px; bottom: 0; left: 0; right: 0; }
.v-enter-active, .v-leave-active { transition: all 0.3s; }
.v-enter, .v-leave-to { transform: translateX(100%); }
 </style>
</head>
<body>
 <div id="app">
  <div class="one">
   <p>
    <router-link to="/foo">下一层</router-link>
   </p>
   <h1>第一层</h1><h1>第一层</h1><h1>第一层</h1><h1>第一层</h1><h1>第一层</h1>
   <h1>第一层</h1><h1>第一层</h1><h1>第一层</h1><h1>第一层</h1><h1>第一层</h1>
   <h1>第一层</h1><h1>第一层</h1><h1>第一层</h1><h1>第一层</h1><h1>第一层</h1>
   <transition>
    <router-view></router-view>
   </transition>
  </div>
 </div>

 <script src="https://unpkg.com/vue/dist/vue.js"></script>
 <script src="https://unpkg.com/vue-router/dist/vue-router.js"></script>
 <script>
  const Foo = {
   template: `
    <div class="whole-page two">
     <router-link to="/">返回</router-link>
     <h1>第二层</h1>
     <transition>
      <router-view></router-view>
     </transition>
    </div>
   `
  }
  const routes = [
   { path: '/foo', component: Foo }
  ]
  const router = new VueRouter({ routes })
  const app = new Vue({ router }).$mount('#app')
 </script>
</body>
</html>

看效果，第二页的高度明明就是视窗的高度，但是它有一个滚动条，实际上那是第一个页面的滚动条。

网上找了好多方法，一一试了，全部不生效。（当然很有可能是我的方法不对。

最后没办法只有找最笨的方法啦，就是通过 v-if 把父页面不显示就好了。

当然不能直接不显示，因为动画还没结束父元素就空白了呀！setTimeout 就好了……

具体代码就不写了，这个应该很容易理解。

以上所述是小编给大家介绍的Vue实现移动端页面切换效果，希望对大家有所帮助，如果大家有任何疑问请给我留言，小编会及时回复大家的。在此也非常感谢大家对我们网站的支持！

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

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

基于Vue的页面切换左右滑动效果,具体内容如下 HTML文本页面: <template> <div id="app> <transition :name="direction" mode="out-in">  <router-view class="app-view" wechat-title></router-vi
Vue页面跳转动画效果的实现方法

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

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

CodePen 地址前端使用 SPA 之后,能获得更多的控制权,比如页面切换动画,使用后端页面我们可能做不了上面的效果,或者做出来会出现明显的闪屏.因为所有资源都需要重新加载. 今天使用 vue,vue-router,animejs 来讲解如何上面的效果是如何实现的. 步骤点击菜单,生成 Bubble,开始执行入场动画页面跳转执行退场动画函数式调用组件我希望效果是通过一个对象去调用,而不是 v-show, v-if 之类的指令,并且为了保持统一,仍然使用 Vue 来写组件.我通常会用
vue.js实现标签页切换效果

第二个实例是关于标签页切换的,先看一下效果: 这也是一个很常见的交互效果,以往正常的javascript写法是给各个按钮绑定事件来切换不同的层,当然也可以用纯css写,给上面的三个切换的层分别添加一个单选按钮的兄弟节点,再用绝对定位把单选按钮定位在三个button上面,这样就可以用:checked伪类来单选按钮的兄弟元素,即对应的不同的层,我简单的写了一下DOM结构,大概就是这样: 那么用vue.js实现上述的效果,其实也有两种途径,一种使用vue-router,vue-router是vue.j
Vue实现移动端左右滑动效果的方法

1. 最近得到一个新需求,需要在Vue项目的移动端页面上加上左右滑动效果,在网上查阅资料,最终锁定了vue-touch 2. 下载vue-touch (https://github.com/vuejs/vue-touch/tree/next) 注意:如果Vue是2.x 的版本的话,一定要下next分支上的. 3. 使用: 3.1 npm install vue-touch@next --save 3.2 在main.js 中引入: import VueTouch from 'vue-touch
js中常用的Tab切换效果(推荐)

如下所示: <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>tab</title> <style> *{margin:0; padding:0; list-style:none;} .box{ width: 1000px; overflow: hidden; margin:100px auto
Android中使用TabHost 与 Fragment 制作页面切换效果

三个标签页置于顶端效果图: 在文件BoardTabHost.java中定义页面切换的效果:切换页面时,当前页面滑出,目标页面滑入.这是2个不同的动画设定动画时要区分对待 import android.content.Context; import android.util.AttributeSet; import android.view.animation.Animation; import android.view.animation.TranslateAnimation; import
Android开发中ViewPager实现多页面切换效果

ViewPager用于实现多页面的切换效果,该类存在于Google的兼容包里面,所以在引用时记得在BuilldPath中加入"Android-support-v4.jar" 首先必须知道:要使用ViewPager,必须要使用PagerAdapter为其提供数据,也就必须实现下面四个方法: 1, getCount():ViewPager需要显示的页面个数 2,isViewFromObject(View view, Object object):view 是某个位置的页面,Object是
vue实现选项卡及选项卡切换效果

这里不跟大家再去把Vue文档上的一些指令用法或者基础知识再复述一遍,既然是从入门到实战,我直接将平时项目中需要实现的一些效果拆分成模块.你们遇到了相关的指令或者不知道怎么用的方法自己对着文档去查,再回过头来看我的实现代码.记住,通读Vue文档真的很重要,很重要! 这里的Vue以单文件的形式引入,另外代码在实现上会一步步的进行优化,客官不要着急! 下面是一个样式稍微丑陋,但功能OK的选项卡. <!DOCTYPE html> <html> <head> <meta c
JS代码实现页面切换效果

本文实例为大家分享了JS代码实现页面切换效果的具体代码,供大家参考,具体内容如下 HTML+CSS部分添加所有页面,和上一页.具体页.下一页的按钮, 设置div样式,默认第一页显示,其他页隐藏. <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title></title> <style> .item { display: none; widt
JavaScript实现鼠标悬浮页面切换效果

本文实例为大家分享了JavaScript实现鼠标悬浮页面切换效果的具体代码,供大家参考,具体内容如下前几天做了个常见的页面悬浮效果,直接上图. html代码 <!DOCTYPE html> <html> <head> <link rel="stylesheet" type="text/css" href="css/4.css" /> <script t

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

相关推荐

随机推荐