html5 ios页面跳转动画,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，给其添加动画类名，即可解决。

至于为什么会出现这种情况，我目前没有深入调查。

等有时间，如果调查出来会补上。