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

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

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

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

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

代码语言:javascript
代码运行次数:0
运行
AI代码解释
复制
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 05: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

复制
相关文章
ai基础教程入门_绘画入门基础教程
,这次写博客是因为应一位同学的要求,写一下GSAP JS的一个小教程。为什么说小呢?因为它实际上就是小,只是一个入门级的小教程。如果你想问:“那你为什么不写详细一点呢?”,我想说,说.,说..,“因为我也不懂,哈哈
全栈程序员站长
2022/09/20
1.2K0
ai基础教程入门_绘画入门基础教程
GSAP动画库入门基础示例:心爱的小摩托
大家好,在我们谈论网页动画时,我们第一时间会想到用jQuery的animate()方法或者CSS3的animation和transition。今天的这篇文章,我将给大家推荐另一个可选方案,一款专业的Web动画库GSAP,通过这款工具你能做出绚丽复杂的动画效果,通过本篇文章的学习,你将会学习到什么是GSAP,以及相关的入门基础知识。
前端达人
2020/03/16
4.7K0
GSAP动画库入门基础示例:心爱的小摩托
GSAP动画库入门基础示例:心爱的小摩托
大家好,在我们谈论网页动画时,我们第一时间会想到用jQuery的animate()方法或者CSS3的animation和transition。今天的这篇文章,我将给大家推荐另一个可选方案,一款专业的Web动画库GSAP,通过这款工具你能做出绚丽复杂的动画效果,通过本篇文章的学习,你将会学习到什么是GSAP,以及相关的入门基础知识。
前端达人
2020/03/10
2.9K0
GSAP动画库入门基础示例:心爱的小摩托
膜拜!用最少的代码却实现了最牛逼的滚动动画!
ScrollTrigger是基于GSAP实现的一款高性能页面滚动触发HTML元素动画的插件。
程序员老鱼
2022/12/02
2.7K0
膜拜!用最少的代码却实现了最牛逼的滚动动画!
ScrollTrigger是基于GSAP实现的一款高性能页面滚动触发HTML元素动画的插件。
程序员老鱼
2022/11/27
3.1K0
膜拜!用最少的代码却实现了最牛逼的滚动动画!
【GSAP3教程】初次上手GSAP3
国内虽然有GSAP中文网,但是文档还是2.x版本,如果使用最新的版本(3.x),可能需要去官网了解。官方建议使用GSAP3,因为GSAP 3使用起来更容易,而且有很多改进。它向后兼容大多数GSAP 2功能,但有些部分可能需要更新才能正常工作。下面我们就先说说和GSAP2版本的区别.
青年码农
2021/08/18
2K0
30个前端开发人员必备的顶级工具
在本文中,我为前端Web开发人员汇总了30种顶级工具,从代码编辑器和代码游乐场到CSS生成器,JS库等等。
@超人
2021/03/18
3.2K0
30个前端开发人员必备的顶级工具
GSAP动画效果总结页
记录下最近常用的以及自己设置出来的效果,免得日后需要时还要去项目里翻。 放大 TweenLite.from($("#titile"), 1, {scale:0.0, opacity:0.0}); TweenLite.to($("#titile"), 1, {scale:1.0, opacity:1.0});  缩小 TweenLite.from($("#titile"), 1, {scale:2.0, opacity:2.3}); TweenLite.to($("#titile"), 1, {scale:1
WindCoder
2018/09/20
9780
HTML5动画软件工具编辑器 HTML5动画分类 工具推荐
接下来介绍几款制作HTML5动画的工具,它们可以分为几类: 1、导出canvas动画: Flash CC(13.1)、Animation、Radi 2、导出DIV+CSS3动画: HTML5 Maker、Edge Animation、Tumult Hype、Nodefire 3、导出SVG动画: Hippo 基本上所有工具导出的动画都会依赖一个独立的js库,这个库用于解析数据,展示动画。而其中两个工具(Radi和Hippo)就比较突出,它们并不依赖独立js库,而是把必须的最精简的js直接内嵌到HTML中,这
用户1258909
2018/07/05
2.6K0
gsap太硬核了,实现复杂的交互动画
通常在C端交互上,产品与UI会在交互上提出一些比较炫酷的效果,面对视觉效果,通常来说,我们会借助第三方优秀的动画库来满足这些需求。通俗来说,就是我们并不是原生从0到1去实现,而是结合现有的库与框架帮我们高效的实现那些看似非常炫酷的效果。
Maic
2023/09/11
1.4K0
gsap太硬核了,实现复杂的交互动画
10 个功能强大的 JavaScript 动画库,打造引人入胜的用户体验
动画。从人群中脱颖而出、吸引访客注意力的绝佳方式。通过富有创意的物体运动和流畅的页面转换,不仅能为我们的网站增添独特的美感,还能提高用户参与度,创造令人难忘的第一印象。
前端小智@大迁世界
2023/09/09
6590
10 个功能强大的 JavaScript 动画库,打造引人入胜的用户体验
Javascript闭包实现Ajax在for循环中正常运行
假设我们现在需要在一个for循环中通过异步的方式向一个后端php程序请求数据,常规的写法Ajax是无法正常工作的,网上也有不少的解决方案,这里提供一个闭包方案,详细如下:
魏杰
2022/12/23
6240
11个最好的JavaScript动态效果库[每日前端夜话0x3E]
当我想要在网上找一个简洁的 Javascript 动效库时,总是发现很多“推荐”的库都是缺乏持续维护的。
疯狂的技术宅
2019/03/27
3.8K0
11个最好的JavaScript动态效果库[每日前端夜话0x3E]
如何使用SVG动画来制作游戏
在使用过一段时间的SVG动画之后,我相当清楚如何利用它来制作动画片段或者网页布局。一些动画库平台,例如Greensock,和原生的CSS动画简直是绝配。于是我便打算深入地研究一下,看看我能否用这些来制作一款简单的游戏。就像一个精美的工艺品一样,好的游戏拥有许多细致的动画细节。有一天夜里,我的脑海中突然闪现了一个游戏的灵感,我马上起来,画了一些草图,之后给我的哥哥看--他是一个专业的网页设计师。我们立即开始着手设计,讨论了所有的细节动画后(试着画出来并且配以音效),我便开始进行游戏开发。
疯狂的技术宅
2019/03/27
2.1K0
如何使用SVG动画来制作游戏
使用GSAP创建惊艳的动画效果(一)
GSAP语法由三部分组成,分别是方法、目标和变量,其调用格式为gsap.to( “.box” ,{ x:200 })各部分含义如下图所示:
九仞山
2023/10/14
3.5K0
使用GSAP创建惊艳的动画效果(一)
2019 年 最受欢迎的10个 JavaScript 动画库!
JavaScript 依然会是 2019 年最受欢迎和使用最为广泛的编程语言, JavaScript 生态系统也会继续发展壮大。
一墨编程学习
2018/12/28
1.6K0
2019 年 11 个受欢迎的 JavaScript 动画库!
超过46K的star,这个流行的库提供了非常多的3D显示功能,以一种直观的方式使用 WebGL。这个库提供了canvas、 svg、CSS3D 和 WebGL渲染器,让我们在设备和浏览器之间创建丰富的交互体验。该库于2010年4月首次推出,目前仍有近1000名贡献者在开发中。
我就是马云飞
2019/03/08
2.4K0
2019 年 11 个受欢迎的 JavaScript 动画库!
过渡&动画概述
Vue提供了一些抽象概念,可以帮助处理过渡和动画,特别是在响应某些变化时。这些抽象的概念包括:
玖柒的小窝
2021/10/31
1.6K0
过渡&动画概述
【H5游戏】红包雨 实现详解
之前总结了一个用pixi 实现的人物换装游戏,没看过的可以看 PIXI 实现人物换装 今天继续总结用 pixi 实现一个 红包雨 H5 游戏,可以来体验下
神仙朱
2021/11/30
3K1
【H5游戏】红包雨 实现详解
CSS + HTML <水滴按钮效果>
Tweenlite,是 webgame 开发人员比较常用的一个缓动库。 官方网站:http://www.greensock.com/tweenlite/ 可以去 https://www.tweenmax.com.cn/start/ 下载 TweenMax.min.js 并引入
网罗开发
2021/04/26
1.7K0
CSS + HTML <水滴按钮效果>

相似问题

Greensock GSAP + SVG路径动画+滚动条

15

在GSAP中不工作的暂停动画(GreenSock)

13

Greensock (gsap)汉堡覆盖层

10

在Gatsby react static site error animation.gsap中使用Greensock (gsap)

40

Greensock GSAP:将CSS立方体-bezier转换为GSAP

14
添加站长 进交流群

领取专属 10元无门槛券

AI混元助手 在线答疑

扫码加入开发者社群
关注 腾讯云开发者公众号

洞察 腾讯核心技术

剖析业界实践案例

扫码关注腾讯云开发者公众号
领券
问题归档专栏文章快讯文章归档关键词归档开发者手册归档开发者手册 Section 归档
查看详情【社区公告】 技术创作特训营有奖征文