介绍为什么要使用Vue & lt; ! DOCTYPE html>
& lt; html lang=癳n"祝辞
& lt; head>
,& lt; meta charset=癠TF-8"比;
,& lt; meta name=皏iewport",内容=翱矶?设备宽度,初始=1.0,,最大范围=1.0,最小规模=1.0,user-scalable=no"比;
,& lt; title> Document
,& lt; style>
*才能,{,填充:0;,保证金:,0;,}
,,html,身体,,# app {,宽度:100%;,高度:,100%;,}
.one 才能,{,高度:100%;,背景颜色:,黄色,,}
.two 才能{background:大敌;番茄;,位置:,固定,,:,0;,底部:,0;,左:,0;,右:,0;,}
.three 才能,{,background - color: # ffe69f;,位置:,固定,,:,0;,底部:,0;,左:,0;,右:,0;,}
.v-enter-active,才能,.v-leave-active {,转型:all 0.3年代;,}
,,.v-enter, .v-leave-to {,变换:translateX (100%);,}
,& lt;/style>
& lt;/head>
& lt; body>
,& lt; div id=癮pp"比;
& lt;才能div 类=叭吮?
,,& lt; p>
,,,& lt; router-link =?foo"在下一层& lt;/router-link>
,,& lt;/p>
,,& lt; h2>第一层& lt;/h2>
& lt;才能/div>
& lt;才能transition>
,,& lt; router-view> & lt;/router-view>
& lt;才能/transition>
,& lt;/div>
,& lt; https://www.yisu.com/zixun/script src=" https://unpkg.com/vue/dist/vue.js ">
这篇文章给大家分享的是有关Vue如何实现移动端页面切换效果的内容。小编觉得挺实用的,因此分享给大家做个参考,一起跟随小编过来看看吧。
Vue是一款友好的,多用途且高性能的JavaScript框架,使用Vue可以创建可维护性和可测试性更强的代码库,Vue允许可以将一个网页分割成可复用的组件,每个组件都包含属于自己的HTML, CSS, JavaScript,以用来渲染网页中相应的地方,所以越来越多的前端开发者使用Vue。
在子页面把整个页面做绝对定位,覆盖整个屏幕,子父页面将router-view用,过渡套起来,并加上过渡动画就可以啦。
代码:
