vue2.0项目CSS3动画打包后动画失效解决
文章 1980 0 0 0
发布时间:2019年05月16日

概述

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

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

"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);
    }
}
评论专区