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