聊聊CSS动画的监听

html-css014

聊聊CSS动画的监听,第1张

还记得许多年前,我们为一个元素添加有一个动画class之后,你还在用settimeout来延迟下一个动作,这么做过时啦。

哪怎么做呢。

不是添加了一个类么,哪动画结束以后来执行这个动作呗。

哪么动画有两种,还是要区别对待的。

1.animation

2.transition

-webkit-animation动画其实有三个事件:

开始事件 webkitAnimationStart

结束事件 webkitAnimationEnd

重复运动事件 webkitAnimationIteration

嗯 对 就是这么简单 后面的实际用例我会附上

待更新中。。。

这篇文章写出来以后,朋友反馈过来有兼容性问题。

iOS9一下和安卓4.4一下是不支持的。

因为现在大多数项目技术栈是vue,这里我就推荐使用vue的过渡钩子函数beforeLeave来解决这个问题,关于vue过渡常见的用法和解惑我会单独开一篇文章去写这个东西。

其他比较好的解决方案还是使用setTimeout去解决这个问题。

https://developer.mozilla.org/en-US/docs/Web/Events/transitionend

注意:每个启用TransitionCSS属性的分别对应独立的transitionend事件

CSS3的动画的优点:

1.在性能上会稍微好一些,浏览器会对CSS3的动画做一些优化(比如专门新建一个图层用来跑动画)

2.代码相对简单

但其缺点也很明显:

1.在动画控制上不够灵活

2.兼容性不好

3.部分动画功能无法实现(如滚动动画,视差滚动等)

JavaScript的动画正好弥补了这两个缺点,控制能力很强,可以单帧的控制、变换,同时写得好完全可以兼容IE6,并且功能强大。但想想CSS动画的transform矩阵是C++级的计算,必然要比javascript级的计算要快。另外对库的依赖也是一个很让人头疼的问题。

所以,对于一些复杂控制的动画,使用javascript会比较靠谱。而在实现一些小的交互动效的时候,就多考虑考虑CSS吧。

CSS Animation Store

这个主意是通过一个简单的接口来访问CSS动画,实际上之前的Morf.js和CSSA中都有这样的处理,大部分代码已经有了,只需要整整,按照Chris所建议的接口风格写下来

从GitHub下载CSS Animation Store

下面是CSS Animation Store的基本接口(关于代码如何工作的信息),将代码放在标签之前,会创建一个全局的对象 CSSAnimations,这个对象包含所有当前可以使用的CSS动画

比如,获取名称为”spin”的动画,你可以按下面的代码:

var spin = CSSAnimations.spin

参数spin是一个KeyframeAnimation实例,有下面的属性和函数:

keyframes – KeyframeRule 集合

original – 原始对象 WebKitCSSKeyframesRule 或者MozCSSKeyframesRule 类型

getKeyframeTexts() – 返回所有keyframe文本集合, e.g. [‘0%’, ‘50%’, ‘100%’]

getKeyframe(text) – 返回指定文字的 KeyframeRule 对象, e.g. getKeyframe(‘0%’)

setKeyframe(text, css) – 设置新的CSS, e.g.setKeyframe(‘10%’, {background: ‘red’, ‘font-size': ‘2em’})

可以看出,KeyframeRule提供了一些方法和函数,是对 WebKitCSSKeyframeRule 和MozCSSKeyframeRule (注意是frame不是frames)的封装,具有下面的属性和方法

css – 该keyframe的css内容, e.g. {background: ‘red’, ‘font-size': ‘2em’}

keyText – 该帧的名称, e.g. 10%

original – 原始对象 WebKitCSSKeyframeRule 或者MozCSSKeyframeRule

示例

获取动画中的所有帧

var spin = CSSAnimations.spin

for(var i=0i<spin.keyframes.lengthi++)

console.log(spin.keyframes[i].css)

修改动画中的某一帧

var spin = CSSAnimations.spin

spin.setKeyframe('10%', {background: 'red', 'font-size': '2em'})

反馈

给我博客或者GitHub留言,让我知道你的想法,我还开放了修改和增加的权限

使用原生JavaScript访问和创建CSS动画

如果你不想使用CSS Animation Store,或者只是想知道它的实现原理,可以参看下面的介绍

访问CSS动画

可以通过CSSOM访问keyframe动画,下面是我CSSA中的代码,用于访问指定的CSS动画