脚本宝典收集整理的这篇文章主要介绍了

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

至于为什么会出现这种情况,我目前没有深入调查。
等有时间,如果调查出来会补上。

总结

以上是脚本宝典为你收集整理的

web 移动端 ios 浏览器中 animation 动画异常

全部内容,希望文章能够帮你解决

web 移动端 ios 浏览器中 animation 动画异常

所遇到的程序开发问题,欢迎加入QQ群277859234一起讨论学习。如果觉得脚本宝典网站内容还不错,欢迎将脚本宝典网站推荐给程序员好友。 本图文内容来源于网友网络收集整理提供,作为学习参考使用,版权属于原作者。如您有任何意见或建议可联系处理。小编QQ:384754419,请注明来意。

80%的人都看过