用Vue自带的过渡 《 进入/离开 & 列表过渡 》和 嵌套路由 和 fixed定位实现 其实还是挺简单的。 在子页面把整个页面做绝对定位，覆盖整个屏幕，子父页面将 router-view 用 transition 套起来，并加上过渡动画就可以啦。 代码： 复制代码 复制代码 效果： 有一个问题需要注意一下， 我们知道，在应用transform属性的时候，fixed定位会变成absolute。 这里，页面转换的时候，就变成了相对translation定位。所以如果子页面中有绝对定位的话，移动的过程中页面会变形。 简单举个栗子， 复制代码 复制代码 看下效果： OKOK，反正就是这种bug嘛。 解决办法就是，就是，尽量让页面fixed定位都是0 0 0 0，然后偏移用padding实现。 大概吧……反正我是这么解决的…… 比如上面那个可以把CSS改成这样解决问题。 复制代码 * { 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: 0; padding-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; z-index: 100; } .two header { top: 50px; background-color: #666; } 复制代码 嗯嗯 还有一个问题，还有个滑动穿透的问题，（真开心! 这么多问题！ 我再举个栗子， 复制代码 复制代码 看效果，第二页的高度明明就是视窗的高度，但是它有一个滚动条，实际上那是第一个页面的滚动条。 网上找了好多方法，一一试了，全部不生效。（当然很有可能是我的方法不对。 最后没办法只有找最笨的方法啦，就是通过 v-if 把父页面不显示就好了。 当然不能直接不显示，因为动画还没结束父元素就空白了呀！setTimeout 就好了…… 具体代码就不写了，这个应该很容易理解。 还有什么问题，等我想起来在补充。或者还有什么没注意到的问题，欢迎路过的大佬们提出呀，反正我也解决不了。 分类: 前端笔记 标签: vue 好文要顶 关注我 收藏该文 wenr 关注 - 9 粉丝 - 82 +加关注 1 « 上一篇：一步一步用Canvas写一个贪吃蛇 posted @ 2018-11-12 20:44 wenr 阅读(271) 评论(0) 编辑 收藏 刷新评论刷新页面返回顶部 注册用户登录后才能发表评论，请 登录 或 注册，访问网站首页。 【推荐】超50万VC++源码: 大型组态工控、电力仿真CAD与GIS源码库！ 【推荐】华为云11.11普惠季 血拼风暴 一促即发 【工具】SpreadJS纯前端表格控件，可嵌入应用开发的在线Excel 【腾讯云】拼团福利，AMD云服务器8元/月 腾讯云1105 相关博文： · VUE 路由组件左右滑动切换（移动端） · 移动端轻松实现高亮效果 · react实现页面切换动画效果 · vue页面切换效果（slide效果切换） · 移动端拼图效果实现 最新新闻： · 与恒大战不休？贾跃亭再申请剥夺时颖资产抵押权 · Facebook同意接受法国6个月监管 以阻止仇恨言论传播 · 小米南迁， 难迁：雷军想去武汉 员工不想去 · 趣头条财报电话会议实录：继续在低线城市获取新用户 · 2135亿，双11十年，巨额交易背后的两个焦点 » 更多新闻... 历史上的今天: 2016-11-12 学生成绩管理系统 2.0（图形界面） 2015-11-12 Codeforces Round #311 (Div. 2) D - Vitaly and Cycle(二分图染色应用) 公告https://www.cnblogs.com/wenruo/p/9948348.htm