找了好多博客实现效果都……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实现移动端页面切换效果的更多相关文章

  1. jquery mobile页面切换效果(Flip toggle switch)(注：jQuery移动使用的数据属性的列表。 )

    1.页面切换(data-transition)

  2. Android - FragmentTabHost 与 Fragment 制作页面切换效果

    使用 FragmentTabHost 与 Fragment 制作页面切换效果 API 19 TabHost已经不建议使用了.用 FragmentTabHost 来代替TabHost.实际上 Fragm ...

  3. Android - TabHost 与 Fragment 制作页面切换效果

    Android - TabHost 与 Fragment 制作页面切换效果 Android API 19 , API 23 三个标签页置于顶端 效果图: 在文件BoardTabHost.java中定义 ...

  4. html5各种页面切换效果和模态对话框

    页面动画:data-transition 属性可以定义页面切换是的动画效果.例如:<a href="index.html" data-transition="pop ...

  5. 基于html5和css3响应式全屏滚动页面切换效果

    分享一款全屏响应式的HTML5和CSS3页面切换效果.这个页面布局效果对于那些页面要求固定100%高度和宽度的网站和APP来说是十分有用的.效果图如下: 在线预览   源码下载 HTML wrappe ...

  6. WP8 NavigationInTransition实现页面切换效果

    NavigationInTransition这个是实现页面切换效果,而且没控件来拖,要自己手动写, 将App.xaml.cs中InitializePhoneApplication()函数里的RootF ...

  7. 在uwp仿IOS的页面切换效果

    有时候我们需要编写一些迎合IOS用户使用习惯的uwp应用,我在这里整理一下仿IOS页面切换效果的代码. 先分析IOS的页面切换.用户使用左右滑动方式进行前进和后退,播放类似于FlipView的切换动画 ...

  8. [Swift通天遁地]九、拔剑吧-(7)创建旋转和弹性的页面切换效果

    ★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★➤微信公众号:山青咏芝(shanqingyongzhi)➤博客园地址:山青咏芝(https://www.cnblogs. ...

  9. [Swift通天遁地]九、拔剑吧-(8)创建气泡式页面切换效果

    ★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★➤微信公众号:山青咏芝(shanqingyongzhi)➤博客园地址:山青咏芝(https://www.cnblogs. ...

随机推荐

  1. html_之css

    css 有三种形式的写法: 直接在标签里写入style样式 在<head></head>里写入<style></style>样式 直接创建.css 文件 ...

  2. 我把一些Linux的中英文命令做了对应翻译大家参考一下

    本文我们把Linux的中英文命令做了对应翻译,给需要的朋友参考一下.(http://wap.0834jl.com) 很多朋友在论坛上找Linux英文命令,我们给大家整理了比较全的Linux英文命令,并 ...

  3. 在命令行输入python出现“Warning:This Python interpreter is in a conda environment, but the environment has not been activated. Libraries may fail to load. To activate this environment please see https://conda.

    [现象] 在命令行输入python出现“Warning:This Python interpreter is in a conda environment, but the environment h ...

  4. python3中列表、元组、字典的增删改查说明详解

    python基础中的列表.元组.字典属于python中内置的序列数据结构.其中序列可以进行的操作包括索引.截取(切片).加.乘.成员检查等. 1.列表 列表(list)是最常用的python数据类型之 ...

  5. Alpha冲刺(2/10)——2019.4.24

    作业描述 课程 软件工程1916|W(福州大学) 团队名称 修!咻咻! 作业要求 项目Alpha冲刺(团队) 团队目标 切实可行的计算机协会维修预约平台 开发工具 Eclipse 团队信息 队员学号 ...

  6. 练习html,css,js仿制百度首页

    1.练习目的 练习使用html,scc,js 完成界面样式,用ul标签实现文本框下拉,通过js完成添加列表内容等功能 2.效果 3.程序代码 <!DOCTYPE html> <htm ...

  7. ubuntu的安装及ubuntu中安装mysql和tomcat

    一.安装ubuntu 1.创建虚拟机 2.向导选择自定义 3.然后下一步再下一步,直到这里,稍后再安装系统 4.然后选择linux,注意这里下面的下拉选择Ubuntu64,因为我们下载的是64位的,如 ...

  8. Android 动画 (1) 基础

    背景 坑, 最近打算在recyclerview item上加一个带动画的button,结果button无法连续点击,还以为是动画是同步的,必须要结束之后才能开始另一个动画,后来去掉recylervie ...

  9. VB使用API进行RC4加密解密(MD5密钥)

    根据网络资料整改,来源未知,已调试通过. Option Explicit Private Declare Function CryptAcquireContext Lib "advapi32 ...

  10. php 将图片转成base64

    /** * 获取图片的Base64编码(不支持url) * @date 2017-02-20 19:41:22 * * @param $img_file 传入本地图片地址 * * @return st ...