頁面有個彈窗，我要實現的效果就是彈窗從底部滑上來，並伴隨輕微的抖動效果。
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
}),