Vue实现移动端页面切换效果

发布时间：2020-12-14 23:57:33 所属栏目：资源来源：网络整理

导读：找了好多博客实现效果都……emmm…… 应用Vue自带的过渡《??》和嵌套路由和 fixed定位实现其实还是挺简单的。在子页面把整个页面做绝对定位，覆盖整个屏幕，子父页面将? ?用? ?套起来，并加上过渡动画就可以啦。代码： Document 下一层第一层 span st

找了好多博客实现效果都……emmm……

应用Vue自带的过渡《??》和嵌套路由和 fixed定位实现

其实还是挺简单的。

在子页面把整个页面做绝对定位，覆盖整个屏幕，子父页面将??用??套起来，并加上过渡动画就可以啦。

代码：

Document 下一层第一层

效果：

有一个问题需要注意一下，

我们知道，在应用transform属性的时候，fixed定位会变成absolute。

这里，页面转换的时候，就变成了相对translation定位。所以如果子页面中有绝对定位的话，移动的过程中页面会变形。

简单举个栗子，

Document 我是一个标题下一层第一层

看下效果：

OKOK，反正就是这种bug嘛。

解决办法就是，就是，尽量让页面fixed定位都是0 0 0 0，然后偏移用padding实现。

大概吧……反正我是这么解决的……

比如上面那个可以把CSS改成这样解决问题。

{:;:; }{:;:; }{:; }{:;:;}{:;:;:;:;:;:;:; }{:; }{:; }{:;:;:;:;:;:;:;:;:; }{:;:; }

嗯嗯还有一个问题，还有个滑动穿透的问题，（真开心! 这么多问题！

我再举个栗子，

下一层第一层<第一层<第一层<第一层<第一层第一层<第一层<第一层<第一层<第一层第一层<第一层<第一层<第一层<第一层

看效果，第二页的高度明明就是视窗的高度，但是它有一个滚动条，实际上那是第一个页面的滚动条。

网上找了好多方法，一一试了，全部不生效。（当然很有可能是我的方法不对。

最后没办法只有找最笨的方法啦，就是通过??? 把父页面不显示就好了。

当然不能直接不显示，因为动画还没结束父元素就空白了呀！setTimeout 就好了……

具体代码就不写了，这个应该很容易理解。

还有什么问题，等我想起来在补充。或者还有什么没注意到的问题，欢迎路过的大佬们提出呀，反正我也解决不了。

（编辑：李大同）

【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容!