Angular.js 与 animate.css 集成

[ik0r]

animate.css经过很多css高手的贡献, 现在已经有很多的动画了. 如果能够在angular中使用这些动画, 将会非常美妙.

通过对angular-animate的学习, 可以尝试将animate.css上的动画移植到angular中, 使之能够按照angular的方式来使用.

通过观察, 可以知道, animate.css基本有两大类动画, 一类为入场和离场动画, 另一类则是可以重复执行的普通动画.

入场和离场动画,可以经过处理之后,变成angular-route或者angular-ui-router的过场动画.

而重复执行的动画, 则就可以作为angular中的普通动画, 重复执行.

本人制作的一个demo如下 http://jeremial.github.io/me-animate.css
github地址: https://github.com/jeremial/me-animate.css

欢迎大家感兴趣的一起来探讨.

[taoche]

首页建议写 ng-bind,不用{{ }}。。

动画库和angular结合在一起有什么特别的意义吗？

[ravenw]

有个也是基于animate.css的angular库
https://github.com/Hendrixer/ngFx

[coolicer]

赞一个，不过比较少用动画。

[ik0r]

@taoche 感谢指正, 以后会注意的.
至于意义, 上面已经说过了, 可以按照angular的方式来使用这些动画

@ravenw 看到过这个, 但是自认为, ngFx添加一个新动画有些困难, 而且目前的动画数量不如animate.css中的多, 我这个说简单就是直接把animate.css拿过来处理一下而已, 所以animate.css中的所有动画都是包括在内的.

[shangjiyu]

IE7 飘过~