<transition name="left">
<router-view v-if="getCms" class="Router"/>
</transition> data() {
names: 'left'
} watch: {
'$route'(to, from) {
if (to.index < from.index) {
this.names = "right"
} else {
this.names = "left"
}
}
} .left-enter {
transform: translateX(100%);
} .left-enter-to {
transform: translateX(0);
} .left-enter-active {
transition: 1s;
} .left-leave {
transform: translateX(0);
} .left-leave-to {
transform: translateX(-100%);
} .left-leave-active {
transition: .5s;
} .right-enter {
transform: translateX(-100%);
} .right-enter-active {
transition: .5s;
} .right-leave-to {
transform: translateX(100%);
} .right-leave-active {
transition: .5s;
}

vue 移动端,页面左右页面切换效果(切换过程中会出现白屏效果,布吉岛怎么优化,后来就发布前就弃用了)的更多相关文章

  1. 利用Gulp实现JSDoc 3的文档编写过程中的实时解析和效果预览

    ### 利用Gulp实现JSDoc 3的文档编写过程中的实时解析和效果预览 http://segmentfault.com/a/1190000002583569

  2. 安卓中Canvas实现清屏效果

    可以在代码里面添加: paint.setXfermode(new PorterDuffXfermode(PorterDuff.Mode.CLEAR)); canvas.drawPaint(paint) ...

  3. vue生命周期updated的触发时机之debug过程中发现的firefox问题

    现象描述: 断点位置1 谷歌debug的过程: 火狐debug的过程: 只要在改变数据之后有断点停顿,就会先去执行updated函数 断点位置2 此时火狐和谷歌是一样的效果,但是执行顺序是不一致的 谷 ...

  4. MUI APP防止登陆页面出现白屏

    最近在用MUI开发APP,总体效果,在IOS上,是完美的,但是在低端的Android手机上,就会出现性能问题,我个人觉得最严重的是,就是首页,就是APP打开的第一个页面,在iOS上,由于性能高,所以, ...

  5. 033 Android App启动的闪屏效果+新手向导(多个图片滑动效果)+ViewPager使用

    1.目标效果 App启动时,出现闪屏效果(利用动画实现). App新手使用时,会出现新手向导效果. 2.XML页面布局 (1)闪屏页面 <?xml version="1.0" ...

  6. [cocos2d]场景切换以及切换进度显示

    本文主要分两个部分叙述,第一是场景切换,第二是场景切换的进度显示. 一.场景切换 参考learn-iphone-and-ipad-cocos2d-game-development 第五章内容 coco ...

  7. day70:Vue:Git&路飞学城页面效果

    目录 1.Git 2.路飞学城项目页面效果 0.安装elements UI 1.顶部导航栏效果 2.轮播图效果 1.Git 什么是git?分布式版本管理工具 1.git操作 # 1 创建git本地仓库 ...

  8. vue移动端h5页面根据屏幕适配的四种方案

    最近做了两个关于h5页面对接公众号的项目,不得不提打开微信浏览器内置地图导航的功能确实有点恶心.下次想起来了的话,进行总结分享一下如何处理.在vue移动端h5页面当中,其中适配是经常会遇到的问题,这块 ...

  9. vue环境搭建及单页面标签切换实例

    复习 """ 1.指令: v-once: <p v-once>{{ msg }}</p> v-cloak: 防止页面加载抖动 v-show:绑定的 ...

随机推荐

  1. 去除SVN图标并解除svn控制 (转)

    今天一不小心把F盘弄成了SVN管理项目,结果如图: 看到这个,当场晕菜,经过不懈的努力终于找到一种方法,如下: 右键  ===>TortoiseSVN   ===>Settings 点击确 ...

  2. java 集合综述(总结于多位博友)

    http://www.cnblogs.com/shunran/p/3459065.html(good) java集合类主要负责保存.盛装其他数据,因此集合类也称容器类. java集合类分为:set.l ...

  3. delphi实现窗体组建随窗体大小改变而改变

    在网上查了许多资料去论述如何在dephi中去实现组件随窗口大小的变化而变化,然都不尽如人意.有人说用组件的align + anchors 这两个属性去控制,但是我用了之后,让我大惊失色.把anchor ...

  4. .net Tuple特性

    .net 4.0 引入了 Tuple特性: 在C# 4.0之前我们函数有多个返回值,通常是使用ref,out .到了c# 4.0 应当使用元组Tuple而不是使用输出参数,在任何时候都应避免使用ref ...

  5. C#串口数据互通小程序

    主要功能: 所编写的程序需将串口1.串口2数据互通,即:串口1接收到数据的同时将数据通过串口2发出,串口2接收到数据的同时将数据通过串口1发出. 并根据需要由指定串口发送或获取数据. 代码如下: us ...

  6. C# 根据实体类的属性动态生成字符串

    情景: 目前有两个实体类:Student,ClassInfo. public class Student { public string Name { get; set; } public strin ...

  7. Windows上编译libpng

    下载libpng 1.5.10并解压到[工作目录]/png/libpng-1.5.10 用CMake选择png/libpng-1.5.10目录并Configure: CMAKE_C_FLAGS_DEB ...

  8. vue和jQuery的区别

    从jquery到vue或者说是到mvvm的转变是一个思想的转变,是将原有的直接操作dom的思想转变到操作数据上去 vue和jquey对比 jQuery是使用选择器($)选取DOM对象,对其进行赋值.取 ...

  9. java 程序设计第一次作业

    public class Join{ public static void main(String args[]){ String s1=new String("hello"); ...

  10. kali linux之拒绝服务攻击工具

    hping3 几乎可以定制发送任何TCP/IP数据包,用于测试FW,端口扫描,性能测试 -c - 计数包计数  -i - interval wait(uX表示X微秒,例如-i u1000)       ...