找了好多博客实现效果都……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. RabbitMQ通过Exchange.fanout、不同的队列绑定同一个Exchange实现多播处理

    消费者1: static void Main(string[] args) { ConnectionFactory factory = new ConnectionFactory() { HostNa ...

  2. [转]centos7 安装jdk11 并设置默认java版本

    https://www.server-world.info/en/note?os=CentOS_7&p=jdk11&f=2 OpenJDK 11 : Install 2018/10/1 ...

  3. mysql分库分表,做到永不迁移数据和避免热点

    作者:老顾聊技术   搜云库技术团队  来源:https://www.toutiao.com/i6677459303055491597 一.前言 中大型项目中,一旦遇到数据量比较大,小伙伴应该都知道就 ...

  4. Echarts line折线图使用(vue)

    实现 首先引入echarts工具 // vue文件中引入echarts工具 let echarts = require('echarts/lib/echarts') require('echarts/ ...

  5. tomcat运行后提示Could not create the Java Virtual Machine.

    大致的问题是Java虚拟机(JVM)分配的内存大于系统可用内存,一开始去网上找了些资料,大多是都是说修改MyEclipse安装目录下的elicpse.ini文件中的内存大小.但我试了之后发现然并软,后 ...

  6. linux环境下安装tcping工具测试访问超时

    wget https://sources.voidlinux.eu/tcping-1.3.5/tcping-1.3.5.tar.gz tar zxvf tcping-1.3.5.tar.gz cd t ...

  7. 简单的dfs题 --- POJ1321 棋盘问题

    题目链接: http://poj.org/problem?id=1321 题目大意: 你有k个棋子,若干个可以填的位置,要求填下一个棋子后其行和列不能填棋子. 思路: dfs策略 画图理解更好些: 填 ...

  8. Gcd&Exgcd算法学习小记

    Preface 对于许多数论问题,都需要涉及到Gcd,求解Gcd,常常使用欧几里得算法,以前也只是背下来,没有真正了解并证明过. 对于许多求解问题,可以列出贝祖方程:ax+by=Gcd(a,b),用E ...

  9. IaaS，PaaS和SaaS

    云计算的三种服务模式:IaaS,PaaS和SaaS IaaS: Infrastructure-as-a-Service(基础设施即服务)是第一层. PaaS: Platform-as-a-Servic ...

  10. django+javascrpt+python实现私有云盘代码

    丁丁:由于篇幅有限,这里暂时只展示python后端代码,前端js代码后面上传,有需要的也可以留言私信我. 1.view.py 使用用户.部门.公司等相关账号的创建,已经个人,部门账号的冻结,删除,相关 ...