Question

我希望我的<li>在从Ajax加载加载时动画显示。这是我的代码，它适用于annimation，但它会消除所有<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变量也在循环内收集元素。正在进行的循环。
感谢TimelineLite变量，每个rainingPhrase个实例都会收到列表项的所有。
这会告诉每个TimelineLite个实例，它会立即为 LI 的所有设置动画，因为默认情况下，它们都会添加到第0位位置。（我建议你看看understand the position parameter）。

解决方案可能是：

将你的tl变量放在循环之外，这样你就有了一个时间轴，而不是很多。对rainingPhrase变量执行相同操作。将它们放在 AFTER 循环中。
将{paused: true}添加到时间轴的构造函数中，以便在添加所有内容时保持暂停状态，即var tl=new TimelineLite({paused: true});。
我建议您使用add方法，而不是使用staggerFromTo方法，因为您希望为每个列表项设置初始状态，并且您希望它们准确地放置您的补间一点之后或重叠一点点。所以代码变成：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 animate <li> in ajax for loop </li>

1 个答案: