首页
学习
活动
专区
圈层
工具
发布
首页
学习
活动
专区
圈层
工具
社区首页 >问答首页 >Greensock GSAP在ajax for循环中动画化<li>

Greensock GSAP在ajax for循环中动画化<li>
EN

Stack Overflow用户
提问于 2015-03-25 02:02:44
回答 1查看 583关注 0票数 1

我希望我的<li>在从Ajax加载加载时能够动画化。下面是我的代码,它可以处理循环,但是它可以保存所有<li>的加载。

如何在加载时将每个动画分别动画化?

代码语言:javascript
代码运行次数:0
运行
复制
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(); 
}

}
EN

回答 1

Stack Overflow用户

回答已采纳

发布于 2015-04-13 13:51:57

我想你有三个问题:

  1. TimelineLite实例在循环中创建,rainingPhrase变量也在循环中收集元素。正在进行中的循环。
  2. 由于使用了TimelineLite变量,每个实例都接收到列表项的ALL。
  3. 然后,这告诉每个TimelineLite实例是立即动画的LIs的所有,因为默认情况下,它们都添加到0-位置。(我建议你去了解位置参数看看这个)。

解决办法或许可以是:

  1. 将您的tl变量放在循环之外,这样您就有了一个时间线而不是多个时间线。对rainingPhrase变量也做同样的操作。将这两个放在循环之后。
  2. {paused: true}添加到时间线的构造函数中,以便在添加所有内容(即var tl=new TimelineLite({paused: true}); )时保持暂停。
  3. 与使用add方法不同,我建议您使用staggerFromTo方法,因为您希望为每个列表项设置一个初始状态,并且希望它们将您的tweens放在后面或重叠一点。所以代码变成:tl.staggerFromTo(rainingPhrase, 2, {bottom: 250}, {bottom: 5, ease: Bounce.easeOut}, .2);。这个.2是参差值。你看这里
  4. 最后,播放时间线,即tl.play();

尽管如此,您可能甚至不需要使用TimelineLite。您可以使用TweenMax并实现相同的目标。例如,看看这个JSFiddle

票数 0
EN
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接:

https://stackoverflow.com/questions/29246214

复制
相关文章

相似问题

领券
问题归档专栏文章快讯文章归档关键词归档开发者手册归档开发者手册 Section 归档