优化之前:

 /* 分享弹框样式 */
.popUpDiv {
width: 100vw;
height: 100vh;
transition: all 0.5s ease;
position: fixed;
left: 0;
transform: translate3d(0, 0, 0);
background: url('../images/boxshare.png') no-repeat center center;
background-size: 100% 100%;
-webkit-backface-visibility:hidden;
-moz-backface-visibility:hidden;
-ms-backface-visibility:hidden;
backface-visibility:hidden;
-webkit-perspective:1000;
-moz-perspective:1000;
-ms-perspective:1000;
perspective:1000;
z-index: 10;
}
.popUpDiv1 {
bottom: -100vh;
}
.popUpDiv2 {
bottom: 0;
}
 <div @click="sharePopUp" class="popUpDiv" :class="{ popUpDiv2 :isShare, popUpDiv1 :!isShare}"></div>

原来打算动态控制bottom属性的值,来通过transition过渡来实现弹框从页面底部弹出。

这样在PC端是没什么问题的。在IOS上动效也是很流畅。 但是到了Android系统就崩了,过渡动画过程中会有抖动,字体模糊现象!!!

那么如何解决这个问题呢?

在移动端通过控制top,right,bottom,left的值,来实现过渡是存在这个问题的,并且并不建议transition属性值写为all

可以通过transition: transform 0.5s ease;  设置tansform的过渡效果来实现需求。再通过控制transform: translateY(100vh); 来实现dom元素的移动。

优化之后:

 .popUpDiv {
width: 100vw;
height: 100vh;
transition: transform 0.5s ease;
position: fixed;
left: 0;
top: 0;
margin-bottom: -100vh;
transform: translate3d(0, 0, 0);
background: url('../images/boxshare.png') no-repeat center center;
background-size: 100% 100%;
-webkit-backface-visibility:hidden;
-moz-backface-visibility:hidden;
-ms-backface-visibility:hidden;
backface-visibility:hidden;
-webkit-perspective:1000;
-moz-perspective:1000;
-ms-perspective:1000;
perspective:1000;
z-index: 10;
}
.popUpDiv1 {
transform: translateY(100vh);
}
.popUpDiv2 {
transform: translateY(0);
}

这样在Android就变的很流畅了!!!

遇到的一个移动端从下往上过渡的弹框,在Android下过渡动画的优化问题。的更多相关文章

  1. selenium webdriver从安装到使用(python语言),显示等待和隐性等待用法,切换窗口或者frame,弹框处理,下拉菜单处理,模拟鼠标键盘操作等

    selenium的用法 selenium2.0主要包含selenium IDE 和selenium webDriver,IDE有点类似QTP和LoadRunner的录制功能,就是firefox浏览器的 ...

  2. UI自动化之特殊处理二(弹框\下拉框\选项\文件上传)

    弹框\下拉框\选项\文件上传也是一些比较特殊的操作 目录 1.弹框 2.下拉框 3.选项 4.文件上传 1.弹框 弹框有三种形式,value为alert.confirm.prompt三种的弹框,第一个 ...

  3. 转:RTC搭建android下三层应用程序访问服务器MsSql-客户端

    原文:http://www.cnblogs.com/delphi007/p/3346084.html android下stringgrid已知问题: 通过点击时获取对应行的值有问题,在win下调试正常 ...

  4. 转:RTC搭建android下三层应用程序访问服务器MsSql-服务器端

    原文:http://www.cnblogs.com/delphi007/p/3346061.html 前几天通过Ro搭建webservice,然后在android下调用,虽然已近成功,但是返回的数据库 ...

  5. 【转】一个高端.NET技术人才的2014年度总结

    [转]一个高端.NET技术人才的2014年度总结  本人在一家公司做技术负责人.主要从事的是.net方面的开发与管理,偏重开发. 弹指一挥间,时间飘然而过,转眼又是一年. 回顾2014年,是我人生中最 ...

  6. RTC搭建android下三层应用程序访问服务器MsSql-客户端

    android下stringgrid已知问题: 通过点击时获取对应行的值有问题,在win下调试正常,在android下出现定位不准 二.客户端开发 1,新建工程 2,添加相关客户端控件TRtcHttp ...

  7. RTC搭建android下三层应用程序访问服务器MsSql-服务器端

    前几天通过Ro搭建webservice,然后在android下调用,虽然已近成功,但是返回的数据库里的中文有乱码一直未得到解决!rtc6.23版本,已经支持xe5,也支持fmx的android下开发, ...

  8. 多个微信小程序一个服务端架构

    由于某些特定的业务场景,当多个小程序需要一个服务端后台提供数据时,大家可能想到是HTTP路由.是的,实际上我们使用微服务的GateWay网关也是一样的,如下图微服务架构: 网关GateWay的作用在于 ...

  9. 【移动端 Web】怎么循序渐进地开发一个移动端页面

    1. 移动页面开发基础 1.1 像素——什么是像素 像素是 Web 页面布局的基础,那么到底什么才是一个像素呢? 像素:一个像素就是计算机屏幕所能显示一种特定颜色的最小区域.这是像素的概念,实际上,W ...

随机推荐

  1. [Android]使用Dagger 2进行依赖注入 - Producers(翻译)

    以下内容为原创,欢迎转载,转载请注明 来自天天博客:http://www.cnblogs.com/tiantianbyconan/p/6234811.html 使用Dagger 2进行依赖注入 - P ...

  2. 访问本地Access 数据出错

    访问本地的access数据库时,出现了OleDbException 10Aug2015 晚: 好像找到了问题所在, 虽然不知道背后深层次的原因 改用了C#, 然后command 语句里也update了 ...

  3. 04day1

    无穷的数列 找规律 [问题描述] 有一个无穷序列如下: 110100100010000100000- 请你找出这个无穷序列中指定位置上的数字. [输入] 第一行一个正整数 N,表示询问次数:接下来的 ...

  4. hdu4505小Q系列故事——电梯里的爱情

    小Q系列故事——电梯里的爱情 Time Limit: 300/100 MS (Java/Others)    Memory Limit: 65535/32768 K (Java/Others)Tota ...

  5. (转) unity 在移动平台中,文件操作路径详解

    http://www.unitymanual.com/thread-23491-1-1.html 今天,这篇文章其实是个老生常谈的问题咯,在网上类似的文章也比比皆是,在此我只是做个详细总结方便大家能够 ...

  6. css的学习笔记

    CSS3有哪些新特性? 1. CSS3实现圆角(border-radius),阴影(box-shadow), 2. 对文字加特效(text-shadow.),线性渐变(gradient),旋转(tra ...

  7. 第二章 Java程序设计环境

    安装 Java 开发工具包 JDK : 编写Java程序的程序员使用的软件 JRE : 运行Java程序的环境,包含JVM和基本类库, 但不包含编译器 SE, EE, ME Java FX : 用于图 ...

  8. shell编程基础(七): 处理文件命令sed与awk

    一.sed(以行为单位处理文件) sed意为流编辑器(Stream Editor),在Shell脚本和Makefile中作为过滤器使用非常普遍,也就是把前一个程序的输出引入sed的输入,经过一系列编辑 ...

  9. sublime Text 正则表达式功能使用介绍

    sublime Text 正则表达式功能使用介绍 1.打开sublime Text ,然后按 CTRL+H打开替换面板 2.如下图,勾选正则表达式功能,然后填上正则表达式和替换内容. 3.替换后结果如 ...

  10. ios-Objective-C中的各种遍历(迭代)方式(转载)

    iOS开发实用技巧—Objective-C中的各种遍历(迭代)方式 说明: 1)该文简短介绍在iOS开发中遍历字典.数组和集合的几种常见方式. 2)该文对应的代码可以在下面的地址获得:https:// ...