第一步,引入样式文件
在head中引入animate的样式文件,中间有个min单词,十年前写js和css文件的时候还没这东西,三年前重新写的时候,突然发有的样式文件有min,查了查原来是mini的意思,压缩后的文件,这样不影响使用,但文件更小。
或者你也可以使用bower和npm来安装,或者使用cdn。
第二步,使用
异常的简单,在js中为你的元素加一个类就可以,animated是必须的,bounceOutLeft是可变的参数。
支持的动画
看了这么多css的动画,animate支持的动画比较偏向基础的那种,
使用中的问题
本来以为一个动作直接触发js中的addClass就可以了,没想到再次点就没了效果,研究了半天,原来如果要想在一个页面再次触发动作,需要把相关的class去掉,调用removeClass即可,我直接用了最笨的办法,设置了一个定时,settimeout一秒后删除想着的样式动作。
彩蛋
看下面这个,another thing from Daniel Eden,然后打开它。
然后你会发现,这家伙居然是facebook的设计师。
后计
用了这个动画插件用了三年了,还真不知道这个的作者,还以为是个机构的出品,最近网站的主页也被更新了,其实更喜欢以前的效果。网上这类的特效很多,animate提供的样式只能算最基本的,可以配合其它css动画一起用。
小伙伴们,你们用的是哪个动画库呢?