vue2.0プロジェクトの中でCSS 3 animationアニメーションを使ってアンドロイドの携帯電話の上で失効する解決方法

1735 ワード

vue2.0+webpackはモバイル端末プロジェクトを行い、プロジェクトでCSS 3 animationアニメーション属性を使用するとiosでは全く問題ないことがわかりますが、アンドロイドでは依然として失効しており、animationを5大ブラウザで各種互換性を書いてもだめです.理由は簡単です.実は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 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);
        }
    }