遇到的一个移动端从下往上过渡的弹框，在Android下过渡动画的优化问题。

优化之前：

 1 /* 分享弹框样式 */
 2 .popUpDiv {
 3     width: 100vw;
 4     height: 100vh;
 5     transition: all 0.5s ease;
 6     position: fixed;
 7     left: 0;
 8     transform: translate3d(0, 0, 0);
 9     background: url('../images/boxshare.png') no-repeat center center;
10     background-size: 100% 100%;
11     -webkit-backface-visibility:hidden;
12     -moz-backface-visibility:hidden;
13     -ms-backface-visibility:hidden;
14     backface-visibility:hidden;
15     -webkit-perspective:1000;
16     -moz-perspective:1000;
17     -ms-perspective:1000;
18     perspective:1000;
19     z-index: 10;
20   }
21   .popUpDiv1 {
22     bottom: -100vh;
23   }
24   .popUpDiv2 {
25     bottom: 0;
26   }

1 <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元素的移动。

优化之后：

 1 .popUpDiv {
 2     width: 100vw;
 3     height: 100vh;
 4     transition: transform 0.5s ease;
 5     position: fixed;
 6     left: 0;
 7     top: 0;
 8     margin-bottom: -100vh;
 9     transform: translate3d(0, 0, 0);
10     background: url('../images/boxshare.png') no-repeat center center;
11     background-size: 100% 100%;
12     -webkit-backface-visibility:hidden;
13     -moz-backface-visibility:hidden;
14     -ms-backface-visibility:hidden;
15     backface-visibility:hidden;
16     -webkit-perspective:1000;
17     -moz-perspective:1000;
18     -ms-perspective:1000;
19     perspective:1000;
20     z-index: 10;
21   }
22   .popUpDiv1 {
23     transform: translateY(100vh);
24   }
25   .popUpDiv2 {
26     transform: translateY(0);
27   }

 

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

转载于:https://www.cnblogs.com/lml2017/p/9968320.html