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. ...
随机推荐
- js原型与原型链探究
原型有一个非常重要的属性叫 prototype 一.先写一个简单的例子,看看 A的原型和A的实例 分别是什么 function A() {} var a = new A() console.log(a ...
- 当TFS/VSTS遇上Power BI
引言 众所周知,要对TFS进行深入的图表分析,往往需要依赖于SQL Server Analysis Service和SQL Server Reporting Service.虽然随着TFS对敏捷项目的 ...
- VIM系统复制粘贴
1 需求 系统复制粘贴主要是满足下面两个需求. 在多个对象之间复制粘贴 vim窗口与vim窗口之间 外部界面与vim窗口之间 不变复制粘贴.从外部界面复制粘贴到vim窗口时,文本不发生任何变化. 2 ...
- Sublime插件：Terminal
这几天在window环境下用gulp构建前端工程,切来切去浪费了不少时间(右键sublime菜单打开文件所在目录,然后去项目根目录,右键打开cmder).这点webstorm自带的Terminal真的 ...
- Kafka详细配置
转自:http://blog.csdn.net/suifeng3051/article/details/38321043?utm_source=tuicool&utm_medium=refer ...
- 如何修改SnipeIT的部分设置
作为一款开源的资产管理系统,Snipe-IT非常的好用又结实,但是原始设置对中国用户有些不方便,部分汉化没有完成,需要直接修改代码,下面把常用的修改记录如下: 1.修改资产打印标签中的文本名称 找到 ...
- 大数据 - Java基础：读取键盘输入的方法
Java中获取键盘输入值的三种方法 程序编写中,从键盘获取数据是一件非常普通又平常的事 C:scanf() C++:cin() C#:Read().ReadKey().ReadLine() Java没 ...
- TortoiseGit的ssh key和Git的ssh key
情景模拟: 你使用Git+TortoiseGit对项目进行版本控制,本地库(自己电脑建立的.git)与远程库(如GitLab上建立)通信需要使用ssh验证,你用git生成公钥并保存到了Gitlab上, ...
- 大数据平台Hive数据迁移至阿里云ODPS平台流程与问题记录
一.背景介绍 最近几天,接到公司的一个将当前大数据平台数据全部迁移到阿里云ODPS平台上的任务.而申请的这个ODPS平台是属于政务内网的,因考虑到安全问题当前的大数据平台与阿里云ODPS的网络是不通的 ...
- python爬取网页内容demo
#html文本提取 from bs4 import BeautifulSoup html_sample = '\ <html> \ <body> \ <h1 id = & ...