关键字：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，给其添加动画类名，即可解决。
至于为什么会出现这种情况，我目前没有深入调查。等有时间，如果调查出来会补上。