Vue实现移动端页面切换效果

找了好多博客实现效果都……emmm……

应用Vue自带的过渡《进入/离开 & 列表过渡》和嵌套路由和 fixed定位实现

其实还是挺简单的。

在子页面把整个页面做绝对定位，覆盖整个屏幕，子父页面将 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:; margin:; }

html, body, #app { width: 100%; height: 100%; }

#app { padding-top: 50px; }

.one { height: 100%; background-color: yellow;}

.two { background-color: tomato; position: fixed; top:; padding-top: 100px; bottom:; left:; right:; }.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:; color: #fff; line-height: 50px; text-align: center; z-index:; }

.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实现移动端页面切换效果的更多相关文章

jquery mobile页面切换效果(Flip toggle switch)(注：jQuery移动使用的数据属性的列表。 )
1.页面切换(data-transition)
Android - FragmentTabHost 与 Fragment 制作页面切换效果
使用 FragmentTabHost 与 Fragment 制作页面切换效果 API 19 TabHost已经不建议使用了.用 FragmentTabHost 来代替TabHost.实际上 Fragm ...
Android - TabHost 与 Fragment 制作页面切换效果
Android - TabHost 与 Fragment 制作页面切换效果 Android API 19 , API 23 三个标签页置于顶端效果图: 在文件BoardTabHost.java中定义 ...
html5各种页面切换效果和模态对话框
页面动画:data-transition 属性可以定义页面切换是的动画效果.例如:<a href="index.html" data-transition="pop ...
基于html5和css3响应式全屏滚动页面切换效果
分享一款全屏响应式的HTML5和CSS3页面切换效果.这个页面布局效果对于那些页面要求固定100%高度和宽度的网站和APP来说是十分有用的.效果图如下: 在线预览源码下载 HTML wrappe ...
WP8 NavigationInTransition实现页面切换效果
NavigationInTransition这个是实现页面切换效果,而且没控件来拖,要自己手动写, 将App.xaml.cs中InitializePhoneApplication()函数里的RootF ...
在uwp仿IOS的页面切换效果
有时候我们需要编写一些迎合IOS用户使用习惯的uwp应用,我在这里整理一下仿IOS页面切换效果的代码. 先分析IOS的页面切换.用户使用左右滑动方式进行前进和后退,播放类似于FlipView的切换动画 ...
[Swift通天遁地]九、拔剑吧-(7)创建旋转和弹性的页面切换效果
★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★➤微信公众号:山青咏芝(shanqingyongzhi)➤博客园地址:山青咏芝(https://www.cnblogs. ...
[Swift通天遁地]九、拔剑吧-(8)创建气泡式页面切换效果
★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★➤微信公众号:山青咏芝(shanqingyongzhi)➤博客园地址:山青咏芝(https://www.cnblogs. ...

随机推荐

Sentry部署
前期准备 [root@Aaron ~]# uname -r 3.10.0-327.el7.x86_64 [root@Aaron ~]# uname -a Linux Aaron 3.10.0-327. ...
C# 调用继电器api usb_relay_device.dll
C# 调用继电器api usb_relay_device.dll 代码封装 usb_relay_device.dll 为C++编写 using System; using System.Collect ...
DDD - 概述 - (一)
本片将介绍以下内容: 1).DDD是什么? 2).怎么使用DDD? 3).使用DDD应该规避或者注意什么? 一.DDD是什么? 简言之:领域驱动设计(domain driven design),顾名思 ...
Delphi 10.3版本获取windows系统版本和CPU信息
procedure TForm1.Button1Click(Sender: TObject); var mm:TRegistry; cpu:string; begin mm:=TRegistry.Cr ...
notes for lxf（四）
类名首字母通常大写创建实例类名 +() __init__方法创建实例时把一些属性绑上去 __init__方法第一参数永远是self 表示船舰的实例本身类是实例的模板实例是一个一个具体的对象 ...
Kali安装Docker
---恢复内容开始--- 第一周计划安装好docker 准备审计thinkphp 框架先把docker 安装的笔记补上本来是在unbuntu 安装了一遍并run 了几个镜像和基本操作 ...
百度地图Web引用
上海中心二楼示例 http://api.map.baidu.com/geocoder?address=北京市海淀区上地信息路9号奎科科技大厦&output=html&src=weba ...
ESP-01S刷ESPEasy固件，接入HA
首先下载ESPEasy最新版 https://github.com/letscontrolit/ESPEasy/releases 准备接线从ESP01S到USB-TTL TTL——ESP01S 3.3 ...
pom string
<?xml version="1.0" encoding="UTF-8"?> <project xmlns="http://mave ...
【PHP版】火星坐标系 (GCJ-02) 与百度坐标系 (BD-09ll)转换算法
首先感谢java版作者@宋宋宋伟,java版我是看http://blog.csdn.net/coolypf/article/details/8569813 然后根据java代码修改成了php代码. & ...

Vue实现移动端页面切换效果

Vue实现移动端页面切换效果的更多相关文章

随机推荐

热门专题