vue里transition实现动画，在ios10.3上无效；打包后低版本安卓系统webview动画失效

、不知不觉、

于 2018-07-25 13:08:09 发布

阅读量4.2k

点赞数

CC 4.0 BY-SA版权

分类专栏： vue CSS 动画 html5 HTML

本文链接：https://blog.youkuaiyun.com/u010394015/article/details/81200837

在Vue中使用transition实现弹窗底部滑入动画和抖动效果时，遇到iOS 10.3.2系统动画失效的问题。通过延迟处理解决了iOS动画问题，但在低版本Android（如4.4）的webview中动画仍然失效，尝试添加各种浏览器前缀无效。最终通过修改vue-loader.conf.js的isProduction为false解决了Android系统动画失效的难题。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

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