vue裡transition實現動畫,在ios10.3上無效;打包後低版本安卓系統webview動畫失效
阿新 • • 發佈:2018-12-30
頁面有個彈窗,我要實現的效果就是彈窗從底部滑上來,並伴隨輕微的抖動效果。
HTML部分:
<transition name="bounce">
<div class="my-popup" v-show="showPopup">
<!-- 彈窗內容 -->
</div>
</transition>
css部分:
/* 彈窗入場動效 */
.bounce-enter-active {
animation: slideInUp ease .5s, bounceIn .2s .5s;
-webkit-animation : slideInUp ease .5s, bounceIn .2s .5s;
}
/* 彈窗出場動效 */
.bounce-leave-active {
animation: slideOutDown .4s both;
-webkitanimation: slideOutDown .4s both;
}
/* 往上滑入 */
@keyframes slideInUp {
0% {
transform: translate3d(0, 100%, 0);
-webkit-transform: translate3d(0, 100%, 0);
visibility : visible
}
to {
transform: translateZ(0);
-webkit-transform: translateZ(0);
}
}
/* 往下滑出 */
@keyframes slideOutDown {
0% {
transform: translateZ(0);
-webkit-transform: translateZ(0);
}
to {
visibility: hidden;
-webkit-transform: translate3d(0 , 100%, 0);
transform: translate3d(0, 100%, 0);
}
}
/* 抖動效果 */
@keyframes bounceIn {
0%,
20%,
53%,
80%,
to {
animation-timing-function: cubic-bezier(.215, .61, .355, 1);
-webkit-animation-timing-function: cubic-bezier(.215, .61, .355, 1);
transform: translateZ(0);
-webkit-transform: translateZ(0);
}
40%,
43% {
animation-timing-function: cubic-bezier(.755, .05, .855, .06);
-webkit-animation-timing-function: cubic-bezier(.755, .05, .855, .06);
transform: translate3d(0, 10px, 0);
-webkit-transform: translate3d(0, 10px, 0);
}
70% {
animation-timing-function: cubic-bezier(.755, .05, .855, .06);
transform: translate3d(0, 6px, 0);
-webkit-transform: translate3d(0, 6px, 0);
}
90% {
transform: translate3d(0, 2px, 0);
-webkit-transform: translate3d(0, 2px, 0);
}
}
結果在iOS10.3.2系統上,slideUp的效果不出現,只有抖動的效果。
後面將slideUp延遲0.01s後,效果出來了,修改彈窗入場動效如下:
/* 彈窗入場動效: 彈窗往上滑動的效果需要加個延遲,否則在iOS10.3系統動畫失效 */
.bounce-enter-active {
animation: slideInUp ease .5s .01s, bounceIn .2s .5s;
-webkit-animation: slideInUp ease .5s .01s, bounceIn .2s .5s;
}
補充:
上述解決了ios10.3動畫失效問題。由於頁面是嵌入在webview裡使用的,後續發現在安卓(oppo 4.4)和(vivo x7 4.4)的系統裡,動畫也會失效,即使加了-webkit,-moz,-o,-ms-等各種字首還是不行,後面參考csdn上的辦法得以解決(原文地址:https://blog.csdn.net/ysm19950927/article/details/80526566)
將vue-loader.conf.js檔案中,isProduction改成false,如下:
loaders: utils.cssLoaders({
sourceMap: sourceMapEnabled,
extract: isProduction
}),
改成
loaders: utils.cssLoaders({
sourceMap: sourceMapEnabled,
extract: false
}),