alice-animate v2.2.0

animate.css

Css 3 动画样式。代码来自：https://github.com/daneden/animate.css

使用说明

官方教程

通过 link 打包引用或使用 seajs.use 引入样式文件，然后绑定对应的 className。

seajs.use(['jquery', 'alice/animate/1.0.0/animate.css'], function($) {
    $('#test').addClass('animated bounceOutLeft');  // bounceOutLeft 可替换成你想要的效果
});

改变动画元素的动画参数。

#yourElement {
    -vendor-animation-duration: 3s;
    -vendor-animation-delay: 2s;
    -vendor-animation-iteration-count: infinite;
}

API

所有 className 在此

演示

以下动画效果在支持css3 animate的高级浏览器中有效。

seajs.use(['jquery', 'index.css'], function($) {
    $('#trigger1').click(function() {
        $('#test1').addClass('animated bounceIn');
    });
});

seajs.use(['jquery', 'index.css'], function($) {
    $('#trigger2').click(function() {
        $('#test2').addClass('animated fadeInUp');
    });
});

seajs.use(['jquery', 'index.css'], function($) {
    $('#trigger3').click(function() {
        $('#test3').addClass('animated rotateInUpRight');
    });
});

seajs.use(['jquery', 'index.css'], function($) {
    $('#trigger4').click(function() {
        $('#test4').addClass('animated tada');
    });
});

seajs.use(['jquery', 'index.css'], function($) {
    $('#trigger5').click(function() {
        $('#test5').addClass('animated shake');
    });
});