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. ...
随机推荐
- autoit学习安装说明及例子
下载安装包或者绿色版本进行使用,我使用的版本是3.3.9.0 第一汉化版命令行安装 : "au3tool.exe /s" 命令行卸载 : "au3tool.exe /u& ...
- 在SSL / https下托管SignalR
https://weblog.west-wind.com/posts/2013/Sep/23/Hosting-SignalR-under-SSLhttps 2013年9月23日•来自毛伊岛,HI• ...
- 微服务框架——SpringCloud（二）
1.Feign声明式服务调用(负载均衡+熔断器) a.概念:Feign是一个声明式的Web Service客户端,它的目的就是让Web Service调用更加简单.Feign整合了Ribbon和Hys ...
- linux 使用技巧 screen 管理你的远程桌面的会话创建和使用
下面介绍 screen 使用的技巧教你管理远程会话 你是不是经常需要 SSH 或者 telent 远程登录到 Linux 服务器?你是不是经常为一些长时间运行的任务而头疼,比如系统备份. ftp 传 ...
- Nvidia的CUDA库现在恢复使用了
Nvidia的CUDA库现在恢复使用了 由于早期版本存在兼容问题,从去年8月nvidia-cuda-toolkit包被移除了.现在该软件包更新后,又重新可以用,被重新添加到Kali Linux软件 ...
- hdu 2005 java
题意: 输入数据格式为YYYY/MM/DD,对于每组输入数据,输出一行,表示该日期是该年的第几天. 思路: 使用Calendar.DAY_OF_YEAR import java.text.ParseE ...
- [R]R语言的module工程化
很遗憾,这还是一个挖坑的问题,解决方案并不是很确定. 需求是,大多数的语言都提供import包或module的功能,避免全部代码写到一个文件中,方便管理与维护. 如常用的database模块,每次写R ...
- 把H5打包成IOS APP其实可以很简单！签名？越狱？都不需要！
很多小伙伴都在开发自己的app, 有的实现实现比较简单,就是一个h5页面,然后想要打包成app发布出去. 这个想法很单纯 打包生成个app这个是很简单的,网上一堆打包工具,分分钟可以完成 BUT…… ...
- Linux网络文件系统的实现与调试
NFS协议 NFS (网络文件系统)不是传统意义上的文件系统,而是访问远程文件系统的网络协议.整个NFS服务的TCP/IP协议栈如下图所示,NFS是应用层协议,表示层是XDR,会话层是RPC,传输层同 ...
- mongodb4.0支持事务
事务特性: 原子性:所有的改变都完成一致性:最终执行结果一致就行隔离性:一个事务的执行不能其它事务干扰.持久性:指一个事务一旦提交,数据不会改变,存在数据库中 exports.getSession = ...