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，给其添加动画类名，便可解决。

至于为何会出现这种状况，我目前没有深刻调查。
等有时间，若是调查出来会补上。