web 移動端 ios 瀏覽器中 animation 動畫異常

關鍵字：animation，ios，移動端，異常
解決問題的辦法：頁面dom加載完畢時延時給dom加上動畫類名。即在vue的mounted鉤子中用定時器延時100ms左右給須要動畫的dom加上類名。

咱們在寫動畫的時候經常會遇到添加簡單css動畫的需求，首選利用animation和@keyframe來實現。當須要一個無限動畫的時候，animation相對於transition來講有一個優點。不用js就能夠一直執行動畫。

我在vue項目中的animation動畫，在iphone中異常，動畫效果紊亂且不明顯。

解決辦法：
1.如今樣式表中寫入動畫樣式：

/*箭頭自己樣式*/
.next-arrow
    width: .5rem;
    position: absolute;
    left:50%;
    bottom: 1rem;
    transition: translate(-50%,0)
/*css動畫樣式,此處用sass*/
.next-arrow-animation
    animation: 1.2s float infinite ease-in;
/*動畫內容*/
@keyframes float {
    0% {
      bottom: 1rem;
    }
    100% {
      bottom: .5rem;
    }
  }

2.在vue的data中加入對應的控制類名的布爾值

data() {
    return {
         animation: false
    };
  }

3.vue模板中,此處用的pug。

img.next-arrow(:class="{'next-arrow-animation':animation}")

4.在vue的mounted鉤子中將animation變爲true

mounted() {
    setTimeout(() => {
      this.animation=true
    }, 100);
}

而後就能夠看到動畫在ios中表現正常。100ms是個經驗值，能夠改變。

若是不是用的vue且遭遇到了一樣問題，可用一樣思路延時操做dom，給其添加動畫類名，便可解決。

至於爲何會出現這種狀況，我目前沒有深刻調查。
等有時間，若是調查出來會補上。