Greensock GSAP 在 ajax for 循环中为 <li> 设置动画

Question

我希望我的 <li> 在从 Ajax 加载时进行动画处理。这是我的代码，它与动画一起使用，但它使所有 <li> 的加载动画。

如何在加载时分别设置动画？

success: function( json_data )
{
for( var i = 0; i < json_data.length; i++ )
{

// if user has no image sets default
if(json_data[i].author=="")
json_data[i].author ='http://lorempixel.com/250/250/'; 

console.log("jsonData: " , json_data[i]);

var rainingPhrase = $(".timeline-normal");
var tl = new TimelineLite();

var new_html = [

'<li class="timeline-normal" id="' + json_data[i].date +'"">',
'<div class="timeline-badge" style="background-image: url(' + json_data[i].author +' )">',
'</div>',
'<div class="timeline-date">',
'<time datetime="' + json_data[i].date + '"></time>',
'</div>',
'<div class="timeline-panel">',
'<a href="json_data[i].url">',
'<div class="popover left">',
'<div class="arrow"></div>',
'<h3 class="popover-title">' + json_data[i].title + '</h3>',
'<div class="popover-content">',
'<p><small>' + json_data[i].description +'</small></p>',
'</div>',
'</div>',
'</a>',
'</div>',
'</li>'
].join( '\n' );

jQuery('.get_more_topics').before( new_html );
jQuery('.get_more_topics').before( more_button );

/// HERE ARE THE LINES I NEED HELP WITH
tl.add(TweenLite.set(rainingPhrase, {bottom: 250}));
tl.add(TweenLite.to(rainingPhrase, 2, {bottom:5, ease: Bounce.easeOut}));

jQuery('#temp_loader').remove();
jQuery('.get_more_topics').show(); 
}

}

Answer 1

我认为你遇到了三个问题：

一个 TimelineLite 实例是在循环内创建的，您的 rainingPhrase 变量也在循环内收集元素。正在进行的循环。
由于 rainingPhrase 变量，每个 TimelineLite 实例都会收到 ALL 个列表项。
然后这告诉每个 TimelineLite 实例是立即为 LIs 的 ALL 设置动画，因为默认情况下，它们都被添加到第 0-th 位置。（我建议你看看这个 understand the position parameter）。

解决方案可能是：

将您的 tl 变量放在循环之外，这样您就有一个时间轴而不是多个时间轴。对 rainingPhrase 变量执行相同的操作。将它们都放在之后循环。
将 {paused: true} 添加到时间线的构造函数，以便在添加所有内容时保持暂停状态，即 var tl=new TimelineLite({paused: true});。
我建议您使用 staggerFromTo 方法而不是使用 add 方法，因为您想为每个列表项设置一个初始状态，并希望它们放置您的补间恰好在它们之后或重叠一点点。所以代码变成：tl.staggerFromTo(rainingPhrase, 2, {bottom: 250}, {bottom: 5, ease: Bounce.easeOut}, .2);。这个.2就是交错值。 Look it up here.
最后，播放时间线，即 tl.play();。

说了这么多，您可能甚至不需要使用 TimelineLite。您可以使用 TweenMax 并实现相同的目的。 Take a look at this JSFiddle for example.

Greensock GSAP 在 ajax for 循环中为 <li> 设置动画

Greensock GSAP animate <li> in ajax for loop

jquery

ajax

gsap