javascript 使用 html5 数据属性的 css3 动画
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/20090782/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
css3 animation using html5 data attribute
提问by Seong Lee
I am trying to use one of the css animation framework called Animate.cssin a way that I can effectively manage multiple animations.
我正在尝试以一种可以有效管理多个动画的方式使用一个名为Animate.css的 css 动画框架。
I have a markup like the following for example.
例如，我有一个如下所示的标记。
<div data-animation="fadeInUp" style="width:100px; height:100px; background-color:#ddd"></div>
And jquery as follows
和 jquery 如下
$(function () {
$('div').addClass('animated ' + data('animation'));
});
So when document is loaded the div should start executing fadeInUpanimation from the css framework referenced.
因此，当加载文档时，div 应该fadeInUp从引用的 css 框架开始执行动画。
In a real context, I would be using jquery scroll plugin to detect the x, y position to find when to fire animation but this is to just get started.
在实际情况下，我将使用 jquery 滚动插件来检测 x、y 位置以查找何时触发动画，但这只是开始。
I must have got something wrong, it doesn't do anything.
我一定是出了什么问题，它没有做任何事情。
Here is my JS Fiddle
这是我的JS 小提琴
回答by Samuli Hakoniemi
$(function () {
var $divToAnimate = $("div"); // This will animate all the div elements in doc
$divToAnimate.addClass('animated ' + $divToAnimate.data('animation'));
});
See for instance your Fiddle updated: http://jsfiddle.net/9aE2N/5/
例如，请参阅您的 Fiddle 更新：http: //jsfiddle.net/9aE2N/5/
回答by Oztro
If you do not want to use jQuery you can add the classes (animated fadeInUp):
如果您不想使用 jQuery，您可以添加类（动画淡入淡出）：
<div id="foo" class="animated fadeInUp" data-animation="zoomInDown" style="width:100px; height:100px; background-color:#ddd">
</div>
