Question

我有以下3个HTML元素：

<div class="item"><h2>Item 1</h2></div>
<div class="item"><h2>Item 2</h2></div>
<div class="item"><h2>Item 3</h2></div>

以下JavaScript：

var timeline = new TimelineMax({paused:true, repeat: -1});
timeline.staggerFromTo($('.item'), 1, {css:{x: -20, opacity: 0}, delay: 0.15, ease:Elastic.easeOut}, 0.5);
timeline.play();

它有效，但这不是我要找的行为。

现在如何运作：第1项淡入＆gt;第2项淡入＆gt;第3项淡出

我希望它如何运作：第1项淡入＆gt;项目1淡出＆gt;第2项淡入＆gt;项目2淡出＆gt;项目3淡入>第3项淡出

Answer 1

以下是否有帮助？

<强> 段：

＆＃13;

var items = document.querySelectorAll('.item'), length = items.length;
var duration = 1;
var tl = new TimelineMax({ paused:true, repeat: -1, delay: duration * 0.5 });
for (var i = 0; i < length; i += 1) {
    tl.from(items[i], duration, { x: -20, opacity: 0, ease: Elastic.easeOut });
    tl.to(items[i], duration, { x: -20, opacity: 0, ease: Elastic.easeIn });
}
tl.play();

＆＃13;

<script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/1.17.0/TweenMax.min.js"></script>
<div class="item"><h2>Item 1</h2></div>
<div class="item"><h2>Item 2</h2></div>
<div class="item"><h2>Item 3</h2></div>

＆＃13;

如果我没有错，.staggerFromTo()在这里没有帮助，因为您需要先在时间轴中添加2个相同元素的补间，一个用于淡入和一个淡出。因此，使用循环。然后使用 GSAP 中的典型.from()和.to()方法来实现淡入淡出和幻灯片效果。

另外，我不确定为什么你有delay应用于每个补间。我已经将它移动到TimelineMax的初始化中，假设您想在第一次启动之前延迟整个动画序列。

希望这有帮助。

GSAP重复交错循环

1 个答案: