头疼的CSS3动画,6种常见错误

原创 智云编程 随笔 前端 91阅读 8 天前 举报

本篇文章总结在CSS3动画上遇到的问题,6种常见错误,以及解决方案。愿每一位前端开发者在后来都能躲过这些坑!

常见错误:Animation篇

首先先来复习一下animation的有哪些属性:

属性名默认作用
animation-namenonekeyframe 的名字
animation-duration0s运行总时长
animation-timing-functionease运行的速度变化,总不可能总是匀速吧
animation-delay0s延迟时间
animation-iteration-count1重复的次数,也可以是无限的infinite
animation-directionnormal动画执行方向,可以正着来,也可以反着来reverse
animation-fill-modenoneimportant 动画结束之后和开始之前的状态,是不是动画未开始的时候就是默认样式,结束的时候又返回默认样式。
animation-play-staterunning动画的状态,注意如果说这个时候动画运行结束了,状态也是running,因为这个running不是表示动画正在运行,而是一种状态,有没有被强行暂停。

常见错误一:动画做完就disappear了!code play~

这个应该是animation中的基础题,所以放在了第一位。

这个问题的解决方案就是animation-fill-mode这个属性没有设置或者设置错误。这个属性从专业的角度来说是动画的一个延续,就是0~100%的keyframe走完之后和开始之前的归宿。

简单地来说就是动画结束之后或者开始之前,当前元素的状态是否保留动画最后一帧的状态或者未开始之前使用第一帧的样式。这个属性默认是不保留状态,也就是说开始之前是原始状态,开始之后才开始转换样式,结束之后会立刻切换至原始状态,仿佛这个动画不曾存在过。

这里的forwards是指动画结束之后(无论是正着来还是倒这来)的状态,backwards是指动画delay的时候的状态。both就很简单了,包含了结束之后和开始之前的状态。当然大家更喜欢both,这样就不用考虑之前或者之后的问题了。

常见错误二:怎么停不下来,想控制动画的动态。code play~

这里我们可以借用animation-play-state来控制动画的是否继续。划重点,这边的是否继续并不包含重新开始。

那么,我可不可以通过控制animation-direction的值来控制动画的重新开始呢?比如我一个动画reverse一下之后又重新开始了。emmm,想法很好,但是现实很残酷。animation的time很智能,比如我在动画的途中改变了动画,然后animation会根据当前时间的反方向的状态获取状态,然后从哪个点开始执行,也就是说在动画途中改变direction,最终动画还是按照原来的时间执行,也就是除非取消动画,否则动画的时间是固定的(当然会有一些小误差)。所以想利用direction来让动画动起来就是太天真了。

既然如此,我可不可以来回动呢,比如一个element,我希望他可以从左到右再从右到左。这个时候animation-direction可以设置为alternate,这样就会控制奇偶次数的不同动画范围,but!动画次数要>1,不然哪里来的奇偶

常见错误:Transition篇

复习一下transition的各个属性值。

transition属性默认值作用
transition-delay0延迟
transition-duration0变换速度
transition-propertyall变化属性,默认监控全部变化,如果只需要某一个值比如transform,就只监听transform即可。
transition-timing-functionease时间函数

常见错误三:是我眼花了吗,怎么直接结束了,仿佛不曾存在过。play code

有一种情况,我在页面首次渲染地时候就对transform进行了修改,想着只要改变tranform,transition就会工作。但是这个transition地工作性质是对比当前渲染状态和上一次渲染状态的的差别。因此像这个样子改变,在首次渲染之前就改变了transform,transition失去了对比的参照物,然后就不动了,解决这个问题可以用requestAnimationFrame解决,这个方法就是用于渲染前的最后一步也就是paint之前的一步,然后修改了layout,最后transition感受到了召唤,识别出了差别,就正常工作了起来。

步骤大概是这样的:

Recalculate Style>Layout>requestAnimationFrame>Recalculate Style>Layout>Update Layer Tree>Paint>Composite Layers

还有一种情况,就是我们希望这个元素可以先向右再向左,根据上次的经验我们可以这么写,但是失效了,为什么呢?因为点击之后设置的样式,还没抵达paint就被requestAnimationFrame重写了,然后就按照最后一次的样式和上一次渲染的样式做了对比,进行了变换。

为了解决这个问题我们可以双重requestAnimationFrame。然而可以看到生效了,但是transition会自动修复,1s内完成的动画,绝不会超时,因此我们的动画悲剧没有按照我们设定的那样向右移动1s之后再向左执行1s,而是总时间1s,所以会闪现结束。

至于如何实现串联动画,我的第一选择是animation,第二选择是监听transitionend事件,当地一个动画结束后再执行之后的动画。

常见错误四:怎么回事!怎么从奇怪的地方出现了!这是一个小bug。code play

理想是从左上到右下,然后放大,动画结束后,重新从原点出发,从上放大滑动到下方,然后却直接从右下平行滑动到了最后的位置,这个小bug可以说是作死。因为transition的特性是保留上一次动画的最后一帧,然后过渡到新的状态,如果不想要某一个状态的重置,记得关闭transition,否则就会出现连续的动画。

因为transition是实时监控的,所以如果如果去除了transform的状态,他会回到default的状态。因此,如果想要抛弃回到初始化或者某一状态需要重置transition。

常见错误五:怎么还在这个层下面?我都给你z-index:1000了,出来啊。动画提升层code play

这里需要提出两个概念一个是css context stack,MDN参考网址

一般情况下如果想要层级高,就用z-index设置就可以了。甚至父节点A的层级低于父节点B的层级,但是,再没有提升层的情况下,同一层中父节点A的子节点可以高于父节点B的层级。但是若是产生了提升层,除非整个父节点A高于父节点B,父节点A中的子节点才可以高于父节点B的层级。

下图就是一个例子,大家可以看见下面这个产生提升层的情况,里面的黄色子节点是无法突破红色节点的,因为他们已经处于不同的层了。z-index只作用于当前层,没有跨层处理的能力。

<figcaption></figcaption>

常见错误六:will-change和translateZ(0)作用是一样的。

这一块,我们都知道如果想要加速GPU渲染就使用类似于hack的translateZ(0)或者是CSS新属性will-change,那么这两者的原理是什么,具体的使用情况是什么?

其实他们就是一个提升层的概念,将之后可能会改变的元素从当前的层中抽离,阻止composition,这样这部分修改的时候就不会影响整个页面的布局,从而阻止了reflow。

那么translateZ(0)的作用是否和will-change一样呢?不!

虽然他们都是提升层,但是will-change带有缓存作用,也就是说change的内容会被缓存,只有第一动画回paint之后的重复动画就不会再绘制,但是translateZ(0)每次动画都会重新绘制。可以说will-change对于重复动画很有好了。但是!不要滥用哦~will-change会缓存,因此很占内存。大家慎用。

这里推荐一下我的前端学习交流群:784783012,里面都是学习前端的从最基础的HTML+CSS+JS【炫酷特效,游戏,插件封装,设计模式】到移动端HTML5的项目实战的学习资料都有整理,送给每一位前端小伙伴。最新技术,与企业需求同步。好友都在里面学习交流,每天都会有大牛定时讲解前端技术!

点击:前端学习圈

评论 ( 0 )
最新评论
暂无评论

赶紧努力消灭 0 回复