关键词：动画，ios，移动端，异常解决方法：在加载页面dom的时候，延时后在dom中添加动画类名。也就是在vue的mountedhook中，用一个定时器延时100ms左右给需要动画的dom添加一个类名。我们在写动画的时候，经常会遇到需要添加简单的css动画的需求。我们更喜欢使用动画和@keyframe来实现它。当需要无限动画时，动画比过渡有优势。你总是可以在没有js的情况下执行动画。我在vue项目中的动画在iphone中出现异常，动画效果杂乱不明显。解决方法：1.现在在样式表中写动画样式：/*arrowitselfstyle*/.next-arrowwidth:.5rem;位置：绝对；左：50%；底部：1rem；transition:translate(-50%,0)/*css动画风格，这里使用sass*/.next-arrow-animationanimation:1.2sfloatinfiniteease-in;/*动画内容*/@keyframesfloat{0%{底部：1rem；}100%{底部：.5rem;}}2.将对应控件类名的boolean值添加到vuedata(){return{animation:false};}3.在vue模板中，这里使用了pug。img.next-arrow(:class="{'next-arrow-animation':animation}")4.在vue的mountedhook中将animation改为truemounted(){setTimeout(()=>{this.animation=true},100);}然后可以看到动画在ios中表现正常。100ms是一个经验值，可以改变。如果你不会用vue，遇到同样的问题，可以用同样的思路，延迟dom的运行，给它加上动画类名来解决。至于为什么会这样，我暂时没有深究。有空我知道了再补充。
