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

代码：

！DOCTYPE html html lang=' en ' head meta charset=' UTF-8 ' meta name=' viewport ' content=' width=device-width，initial-scale=1.0，最大-scale=1.0，最小-scale=1.0，用户-scale=no ' title document/title style * { padd : 0 0；保证金： 0；} html、正文、# app { width : 100%；高度： 100%;} .一个{身高： 100%；背景-颜色：黄色；} .两个{底色-颜色：番茄；位置：固定；top : 0；底部： 0；左： 0；右： 0；} .三{背景色： # FFE 69f；位置：固定；top : 0；底部： 0；左： 0；右： 0；} .v-回车-激活，v-离开-活动{ transition: all 0.3s }。v-输入，v-leave-to { transform : translateX(100%)；}/style/head body div id=' app ' div class=' one ' p router-link to='/foo '下一层/路由器-链路/p h1第一层/h1/div转换路由器-视图/路由器-视图/转换/div脚本src=' http :3359 unpkg。com/vue/dist/vue。js /脚本src=' http :https://unpkg。com/vue路由器/dist/vue路由器。js /脚本const Foo={ template : ` div class='整页两个路由器-链接到='/foo/bar '下一层/router-link router-link to='/'返回/路由器-链路氕第二层/h1过渡路由器-视图/路由器-视图/过渡/div ` } const Bar={ template : ` div class='整页三'路由器-链接到='/foo '返回/路由器-链路氕第三层/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效果：

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

我们知道，在应用改变属性的时候固定的定位会变成绝对的。

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

简单举个栗子，

！DOCTYPE html html lang=' en ' head meta charset=' UTF-8 ' meta name=' viewport ' content=' width=device-width，initial-scale=1.0，最大-scale=1.0，最小-scale=1.0，用户-scale=no ' title document/title style * { padd : 0 0；保证金： 0；}html、正文、# app { width : 100%；高度： 100%;} # app { padding-top : 50px；}.一个{身高： 100%；背景-颜色：黄色；}.两个{底色-颜色：番茄；位置：固定；top : 100 px bottom : 0；左： 0；右： 0；}.v-回车-激活，v-离开-活动{ transition: all 0.3s }。v-输入，v-leave-to { transform : translateX(100%)；}页眉{高： 50像素背景色： # 000;宽度： 100%;位置：固定；top : 0；color: # fff线高： 50px文本对齐：中心；}.两个标题{ top: 50px背景色： # 666;} /style/headbody div id='app '标头我是一个标题/header div class=' one ' p router-link to='/foo '下一层/路由器-链路/p h1第一层/h1过渡路由器-视图/路由器-视图/过渡/div /div脚本src=' http :https://unpkg。com/vue/dist/vue。js /脚本脚本src=' http :https://unpkg。com/vue路由器/dist/vue路由器。js /脚本const Foo={ template : ` div class='整页两个'路由器-链接到='/'返回/路由器-链路报头我也是一个标题/表头氕第二层/h1转换路由器-视图/路由器-视图/转换/div ` } const routes=[{ path : '/Foo '，component : Foo }]const router=new VueRouter({ routes })const app=new Vue({ router }).$ mount(' # app ')/script/body/html看下效果：

OKOK，反正就是这种病菌嘛。

解决办法就是，就是，尽量让页面确定的定位都是0 0 0 0,然后偏移用填料实现。

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

比如上面那个可以把半铸钢钢性铸铁(铸造半钢)改成这样解决问题。

* { padd : 0；保证金： 0；}html、正文、# app { width : 100%；高度： 100%;} # app { padding-top : 50px；}.一个{身高： 100%；背景-颜色：黄色；}.两个{底色-颜色：番茄；位置：固定；top : 0；填充-top : 100 px；底部： 0；左： 0；右： 0；}.v-回车-激活，v-离开-活动{ transition: all 0.3s }。v-输入，v-leave-to { transform : translateX(100%)；}页眉{高： 50像素背景色： # 000;宽度： 100%;位置：固定；top : 0；color: # fff线高： 50px文本对齐：中心；z指数： 100；}.两个标题{ top: 50px背景色： # 666;}嗯嗯还有一个问题，还有个滑动穿透的问题，(真开心！这么多问题！

我再举个栗子，

！DOCTYPE html html lang=' en ' head meta charset=' UTF-8 ' meta name=' viewport ' content=' width=device-width，initial-scale=1.0，最大-scale=1.0，最小-scale=1.0，用户-scale=no ' title document/title style * { padd : 0 0；保证金： 0；}html、正文、# app { width : 100%；高度： 100%;}.一个{最小高度： 100%;背景-颜色：黄色；}.两个{底色-颜色：番茄；位置：固定；top : 0；底部： 0；左： 0；右： 0；}.三{背景色： # FFE 69f；位置：固定；top : 50px bottom : 0；左： 0；右： 0；}.v-回车-激活，v-离开-活动{ transition: all 0.3s }。v-输入，v-leave-to { transform : translateX(100%)；}/style/head body div id=' app ' div class=' one ' p router-link to='/foo '下一层/路由器-链路/p h1第一层/h1h1第一层/h1h1第一层/h1h1第一层/h1h1第一层/h1 h1第一层/h1h1第一层/h1h1第一层/h1h1第一层/h1h1第一层/h1 h1第一层/h1h1第一层/h1h1第一层/h1h1第一层/h1h1第一层/h1过渡路由器-视图/路由器-视图/过渡/div /div脚本src=' http :https://unpkg。com/vue/dist/vue。js /脚本脚本src=' http :https://unpkg。com/vue路由器/dist/vue路由器。js /脚本const Foo={ template : ` div class='整页两个'路由器-链接到='/'返回/路由器-链路氕第二层/h1转换路由器-视图/路由器-视图/转换/div ` } const routes=[{ path : '/Foo '，component : Foo }]const router=new VueRouter({ routes })const app=new Vue({ router }).$ mount(' # app ')/script/body/html看效果，第二页的高度明明就是视窗的高度，但是它有一个滚动条，实际上那是第一个页面的滚动条。

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

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

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

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

以上所述是小编给大家介绍的某视频剪辑软件实现移动端页面切换效果，希望对大家有所帮助，如果大家有任何疑问请给我留言，小编会及时回复大家的。在此也非常感谢大家对我们网站的支持！