vue2.0 + webpack做移动端项目，如果在项目中使用了CSS3 animation动画属性，会发现在ios上完全没问题，但是在安卓手机上依然失效，尽管把animation在五大浏览器各种兼容都写了还是不行，原因其实很简答。其实在 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部分我们也需要做好兼容写法，优雅降级和渐进增强都可以。.audio-play-show {-webkit-animation: say 12s linear infinite-moz-animation: say 12s linear infinite-ms-animation: say 12s linear infinite-o-animation: say 12s linear infiniteanimation: 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)}}可能是因为浏览器缓存了样式文件导致。
可以在css文件引用的末尾随便加个请求参数，如：main.css?v=201804091834，浏览器就以为是个新文件，然后从服务器重新下载该文件。
为什么通过js渲染的元素css不生效？
答案如下：原因是通过测试，这是因为vue文件中的style标签添加了scoped的原因，而scoped的作用是为了保证这些css样式只会对当前vue文件(组件)生效，但是由于其他vue文件(组件)中也有可能会出现相同的class名相同的css样式，于是vue就采用了添加随机后缀的方式防止class名重复的样式出现样式覆盖的情况。
