vue2.0项目CSS3动画打包后动画失效解决办法

最新推荐文章于 2023-03-25 16:20:24 发布

翻译最新推荐文章于 2023-03-25 16:20:24 发布 · 1.1k 阅读

文章标签：

#vue 打包

vue 同时被 3 个专栏收录

15 篇文章

订阅专栏

前端

10 篇文章

订阅专栏

vue打包部署

2 篇文章

订阅专栏

本文探讨了使用Vue2.0+Webpack进行项目开发时遇到的CSS3动画打包前后表现不一致的问题。具体表现为打包后动画效果消失，并分析了原因在于browserslist配置对浏览器版本的支持限制。通过调整配置兼容更多浏览器版本及优化CSS3动画代码来解决问题。

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

vue2.0 + webpack做项目时，css3动画打包前正常，打包后失效，原因是：
vue-cli脚手架package.json配置文件里面对浏览器的版本做了css的前缀处理

"browserslist": [
    "> 1%",
    "last 2 versions",
    "not ie <= 8"
  ]

意思是只兼容主流浏览器的最新两个版本。如果我们要兼容所有的就必须把这改成下面，就可以了。

"browserslist": [
    "> 1%",
    "last 5 versions",
    "Android >= 4.0",
    "not ie <= 8"
  ]

CSS部分我们也需要做好兼容写法，优雅降级和渐进增强都可以。

.hello_world{
-webkit-animation: say 12s linear infinite;
-moz-animation: say 12s linear infinite;
-ms-animation: say 12s linear infinite;
-o-animation: say 12s linear infinite;
animation: say 12s linear infinite;
}

@-webkit-keyframes say {
    0% {}
    100% {
        -webkit-transform: rotateZ(360deg);
    }
}

@-moz-keyframes say {
    0% {}
    100% {
        -moz-transform: rotateZ(360deg);
    }
}

@-ms-keyframes say {
    0% {}
    100% {
        -ms-transform: rotateZ(360deg);
    }
}

@-o-transforms say {
    0% {}
    100% {
        -o-transform: rotateZ(360deg);
    }
}

@keyframes say {
    0% {}
    100% {
        transform: rotateZ(360deg);
    }
}