页面有个弹窗,我要实现的效果就是弹窗从底部滑上来,并伴随轻微的抖动效果。
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
}),