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

优化之前：

 /* 分享弹框样式 */
 .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就变的很流畅了！！！