css3动画使用html5数据属性

css3 animation using html5 data attribute

本文关键字：html5 数据属性 动画 css3      更新时间：2023-09-26

我正在尝试使用一个名为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

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

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

如果您不想使用jQuery，您可以添加类（动画fadeInUp）：

<div id="foo" class="animated fadeInUp" data-animation="zoomInDown" style="width:100px; height:100px; background-color:#ddd">
</div>
相关文章：