Question

我试图以一种可以有效管理多个动画的方式使用一个名为Animate.css的css动画框架。

我有一个像下面这样的标记。

<div data-animation="fadeInUp" style="width:100px; height:100px; background-color:#ddd"></div>

和jquery如下

$(function () {
    $('div').addClass('animated ' + data('animation'));
});

因此，当加载文档时，div应该从引用的css框架开始执行fadeInUp动画。

在真实的上下文中，我将使用jquery滚动插件来检测x，y位置以找到何时触发动画，但这只是开始。

我一定有错，没有做任何事。

这是我的JS Fiddle

Answer 1

$(function () {
    var $divToAnimate = $("div"); // This will animate all the div elements in doc
    $divToAnimate.addClass('animated ' + $divToAnimate.data('animation'));
});

例如，请参阅您的小提琴更新：http://jsfiddle.net/9aE2N/5/

使用html5数据属性的css3动画

1 个答案: