vue2.0プロジェクトの中でCSS 3 animationアニメーションを使ってアンドロイドの携帯電話の上で失効する解決方法
1735 ワード
vue2.0+webpackはモバイル端末プロジェクトを行い、プロジェクトでCSS 3 animationアニメーション属性を使用するとiosでは全く問題ないことがわかりますが、アンドロイドでは依然として失効しており、animationを5大ブラウザで各種互換性を書いてもだめです.理由は簡単です.実はvue-cli足場packageです.jsonプロファイルにはブラウザのバージョンに対してcssの接頭辞処理があります
それでいいです.
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 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);
}
}