V2EX = way to explore
V2EX 是一个关于分享和探索的地方
现在注册
已注册用户请  登录
推荐关注
Meteor
JSLint - a JavaScript code quality tool
jsFiddle
D3.js
WebStorm
推荐书目
JavaScript 权威指南第 5 版
Closure: The Definitive Guide
Jeremial
V2EX  ›  JavaScript

Angular.js 与 animate.css 集成

  •  
  •   Jeremial · 2014-07-15 22:40:46 +08:00 · 7549 次点击
    这是一个创建于 3802 天前的主题,其中的信息可能已经有所发展或是发生改变。
    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

    欢迎大家感兴趣的一起来探讨.
    5 条回复    2014-07-16 09:55:12 +08:00
    taoche
        1
    taoche  
       2014-07-15 22:57:56 +08:00
    首页建议写 ng-bind,不用{{ }}。。

    动画库和angular结合在一起有什么特别的意义吗?
    ravenw
        2
    ravenw  
       2014-07-16 02:03:48 +08:00
    有个也是基于animate.css的angular库
    https://github.com/Hendrixer/ngFx
    coolicer
        3
    coolicer  
       2014-07-16 08:34:28 +08:00
    赞一个,不过比较少用动画。
    Jeremial
        4
    Jeremial  
    OP
       2014-07-16 09:32:39 +08:00
    @taoche 感谢指正, 以后会注意的.
    至于意义, 上面已经说过了, 可以按照angular的方式来使用这些动画

    @ravenw 看到过这个, 但是自认为, ngFx添加一个新动画有些困难, 而且目前的动画数量不如animate.css中的多, 我这个说简单就是直接把animate.css拿过来处理一下而已, 所以animate.css中的所有动画都是包括在内的.
    shangjiyu
        5
    shangjiyu  
       2014-07-16 09:55:12 +08:00
    IE7 飘过~
    关于   ·   帮助文档   ·   博客   ·   API   ·   FAQ   ·   实用小工具   ·   5136 人在线   最高记录 6679   ·     Select Language
    创意工作者们的社区
    World is powered by solitude
    VERSION: 3.9.8.5 · 23ms · UTC 01:28 · PVG 09:28 · LAX 17:28 · JFK 20:28
    Developed with CodeLauncher
    ♥ Do have faith in what you're doing.