javascript 向每个列表项添加延迟的 CSS 动画
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/11165160/
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
Adding CSS animation with delay to each list item
提问by apttap
I'm trying to write some jquery that will go through a specified unordered list / dom element and assign a CSS (animation) class to each list item / child. I also want to make an adjustable delay time between the .addClass.
我正在尝试编写一些 jquery，它将通过指定的无序列表/dom 元素并为每个列表项/子项分配一个 CSS（动画）类。我还想在 .addClass 之间设置一个可调整的延迟时间。
Everything I've tried has failed miserably.
我尝试过的一切都失败了。
For example:
例如：
<ul>
<li>Item 1</li>
<li>Item 2</li>
<li>Item 3</li>
<li>Item 4</li>
</ul>
Becomes:
变成：
<ul>
<li class="animation">Item 1</li>
(50ms delay)
<li class="animation">Item 2</li>
(50ms delay)
<li class="animation">Item 3</li>
(50ms delay)
<li class="animation">Item 4</li>
(50ms delay)
</ul>
Any thoughts?
有什么想法吗？
回答by Adam Merrifield
This here works:
这在这里有效：
$('ul li').each(function(i){
var t = $(this);
setTimeout(function(){ t.addClass('animation'); }, (i+1) * 50);
});
回答by Beetroot-Beetroot
Consider this:
考虑一下：
HTML:
HTML：
<ul id="myList">
<li>Item 1</li>
<li>Item 2</li>
<li>Item 3</li>
<li>Item 4</li>
</ul>
Javascript:
Javascript：
$("#myList li").each(function(i, li) {
var $list = $(this).closest('ul');
$list.queue(function() {
$(li).addClass('animation');
$list.dequeue();
}).delay(50);
});
See fiddle: http://jsfiddle.net/DZPn7/2/
见小提琴：http: //jsfiddle.net/DZPn7/2/
Although this is neither concise nor efficient, it is a jQuery purist's solution.
虽然这既不简洁也不高效，但它是 jQuery 纯粹主义者的解决方案。
回答by Tusko Trush
I have 2 ways for animations (with jQuery and CSS3 Transitions + .addClass).
我有 2 种动画方式（使用 jQuery 和 CSS3 Transitions + .addClass）。
So, You can try jQuery for example:
因此，您可以尝试使用 jQuery，例如：
$('#myList li').each(function(i){
$(this).delay(50*i).animate({opacity: 1},250);
});
and using CSS3 Transitions:
并使用 CSS3 过渡：
$('#myList li').not('.animation').each(function(i){
setTimeout(function(){
$('#myList li').eq(i).addClass('animation');
},50*i);
});
Enjoy!
享受！
回答by Travis J
Although the answer above does a good job of approaching the <ul>and <li>scenario, it will not work very well for a more verbose situation. To really dial this in, the functionality should be wrapped in a function which accepts the target element and delay as an input. The function will then take that element, and set a timeout with the delay for ...sigh, this is too involved I should just code it:
尽管上面的答案在接近<ul>和<li>场景方面做得很好，但对于更详细的情况，它不会很好地工作。要真正调用此功能，应将功能包装在一个接受目标元素和延迟作为输入的函数中。然后该函数将采用该元素，并设置一个带有延迟的超时......叹气，这太复杂了，我应该编码它：
function applyAnimation(element, delay){
setTimeout(function(){ $(element).addClass('animation'); }, delay);
var children = document.getElementById(id).children;
for( var i = 0; i < children.length; i++){
applyAnimation(children[i],(2+i) * delay);//2+i:0 fails, 1 would be parent, 2 is child
}
}
