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

关键字：animation，ios，移动端，异常
解决问题的办法：页面dom加载完毕时延时给dom加上动画类名。即在vue的mounted钩子中用定时器延时100ms左右给需要动画的dom加上类名。

我们在写动画的时候常常会遇到添加简单css动画的需求，首选利用animation和@keyframe来实现。当需要一个无限动画的时候，animation相对于transition来说有一个优势。不用js就可以一直执行动画。

我在vue项目中的animation动画，在iphone中异常，动画效果紊乱且不明显。

解决办法：
1.现在样式表中写入动画样式：


/*箭头本身样式*/
.next-arrowwidth: .5rem;position: absolute;left:50%;bottom: 1rem;transition: translate(-50%,0)
/*css动画样式,此处用sass*/
.next-arrow-animationanimation: 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 动画异常相关推荐

JS动态修改单网页web应用在微信浏览器中的title
利用JS动态修改单网页web应用在微信浏览器中的title 最近做一个微信端项目,主要内容都是采用单页面web,之前做微信端,以营销H5居多,绝大多数也都是单网页,营销H5一般一个标题通吃,修改分享标 ...
iOS中 Animation 动画大全韩俊强的博客
每日更新关注:http://weibo.com/hanjunqiang 新浪微博! iOS开发者交流QQ群: 446310206 1.iOS中我们能看到的控件都是UIView的子类,比如UIButt ...
css3中animation动画、浏览器私有前缀、文字阴影
animation动画: 可以设置多个节点来控制一个或一组动画,动画可以实现更多变化,更多控制,连续自动播放等效果.动画的使用分两步:1.定义动画 2.调用动画(调用必须写调用名称和持续时间),其属 ...
css动画定义,CSS3中Animation动画的定义和调用
现在经常会看到一些门户网站的专题使用到CSS3的动画,咋也不能落伍,在此这梳理下动画知识吧,便于后面用到.接下来介绍下Animation动画的定义和调用,在介绍Animation之前需要了解下Keyf ...
使用 Web Speech API 在浏览器中朗读文本
Web Speech API有两个功能:语音合成(语音阅读)和语音识别(语音到文本的转换).SpeechSynthesis API允许您在浏览器中选择语音并大声朗读任何文本. 无论是应用程序中的语音警 ...
web前端学习（十三）animation动画
动画由于该技术的规范还没有稳定,在使用前要先确保浏览器对其兼容性. Animations是css3的一个模块,使用keyframes定义如何随着时间的移动改变CSS的属性值,可以通过指定它们的持续时 ...
解决ios浏览器中无法禁止缩放的问题
最近在项目开发过程中发现在Safari浏览器中双击按钮会导致页面放大的问题,首先我看了mete标签并在这个标签中添加了禁止用户缩放的属性,这个bug依然存在, 百度一番资料后,发现在 iOS 10之前 ...
Unity中Animation动画的创建
记录下关于Animation的学习: 1.首次创建Animation动画: (1) 把Sprite直接拖到Hierarchy面板: (2) 选中拖上去的Sprite,然后Windows->Ani ...
第100天：CSS3中animation动画详解
CSS3属性中有关于制作动画的三个属性:Transform,Transition,Animation: 一.Animation定义动画 CSS3的Animation是由"keyframes& ...

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

web 移动端 ios 浏览器中 animation 动画异常相关推荐

最新文章

热门文章