vue2.0專案中使用CSS3 animation動畫在安卓手機上失效解決辦法
阿新 • • 發佈：2019-01-01
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 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); } }