找了好多博客实现效果都……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. sql 选取分组中的第一条，显示聚合以外的列，having字句的使用

    分组中的第一条:select * from(select row_number() over(partition by 列1,列2,... order by 列1,列2,...) as rownum ...

  2. 腾讯云服务器、nginx部署loopback

    最近在研究学习nginx,买了腾讯云服务器.在阿里上申请了域名,部署项目遇到很多问题记录一下,以备后用: 1.在腾讯服务器买好,阿里域名申请好后(也可以在腾讯上申请域名),需要添加安全组,创建不同的规 ...

  3. Unity Rain Ai 插件基本使用（一）

    1.下载安装Rain 插件 原先可以在unity的Asset Stroe 下载到,但是现在Rain 的开发公司因为人工智能的发展,公司得到投资,所以下架了rain插件. 所以我给出网盘链接 链接:ht ...

  4. 其他信息: 未能加载文件或程序集“file:///C:\Program Files (x86)\SAP BusinessObjects\Crystal Reports for .NET Framework 4.0\Common\SAP BusinessObjects Enterprise XI 4.0\win32_x86\dotnet1\crdb_adoplus.dll”或它的某一个依赖

    今天在使用水晶报表的过程中,遇到了这个问题,下面是代码 FormReportView form = new FormReportView(); ReportDocument rptc = new Re ...

  5. 多人合作项目如何去管理git仓库

    前记:在git之前依稀记得有SVN去管理代码仓库,现在多用git去管理我们的代码:现在一般的项目大多数是多人同时开发,这样就会存在一个问题就是如何去协调开发:这也是lz当前使用git开发管理的些许经验 ...

  6. Capslock+ 键盘党都爱的高效利器 - 让 Windows 快捷键操作更加灵活强大

    Capslock+ 键盘党都爱的高效利器 - 让 Windows 快捷键操作更加灵活强大  优化辅助    Windows   2016-06-05 91,167   微博微信QQ空间印象有道邮件   ...

  7. C语言中数组使用负数值的标记

    ·引 对数组的认知 在c语言中,我们经常使用的一个结构便是数组,在最开始学习数组的时候,它被描述成这样(以一维二维数组为例):一维数组是若干个数连续排列在一起的集合,我们可以通过0-N的标记(N为数组 ...

  8. BZOJ2681 : 玩游戏2

    首先若存在多个连通块,那么答案显然是$+\infty$. 否则以$m$为根,每棵子树的根节点都最多只能放一个金币,且这些子树之间互不干扰. 对于一棵父亲为$m$的子树,最优方案下一定可以将子树剖分成若 ...

  9. 重启Oracle 服务

    1.oracle用户进入sqlplus sqlplus /nolog connect /as sysdba startup exit 2.进去操作系统启动监听 lsnrctl start 3.使用we ...

  10. CMD 中常见命令

    引自百度经验:https://jingyan.baidu.com/article/67508eb41d44a09cca1ce4f1.html ipConfig:查询ip ping:查询连接速度: pi ...