vue2.0项目CSS3动画打包后动画失效解决
vue2.0 + webpack做项目时,css3动画打包前正常,打包后失效,原因是:vue-cli脚手架package.json配置文件里面对浏览器的版本做了css的前缀处理"browserslist":[ ">1%...
·
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);
}
}
链接:https://www.jianshu.com/p/3e9f0bee74c8
更多推荐
已为社区贡献1条内容
所有评论(0)