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