如何使用延迟 TweenMax.to 制作动画？答案

【问题标题】：How to animate with delay TweenMax.to?如何使用延迟 TweenMax.to 制作动画？
【发布时间】：2017-10-05 00:35:27
【问题描述】：

我使用 TweenMax 创建了一个动画，将 div 从其父级的 100% 宽度设置为零。我有三个相邻的 div，它们与下图重叠。现在我希望每个preload div 类将在前一个被触发后几秒钟开始。

我尝试了 setTimeout 之类的方法，但无法正常工作。我怎样才能达到上述目的？

代码笔：https://codepen.io/anon/pen/aWVZXL

【问题讨论】：

要一个一个删除....？
是的。所以当第一个 div 动画结束时，下一个应该开始，或者当它在动画中间时，另一个会开始。 @MadhuMagar

标签： javascript jquery css gsap

【解决方案1】：

我已更改脚本。如果需要，请重构。

$(document).ready(function() {
var toBeAnimated;
var currentAnimat = 0;

$('.link').click(function() {
    toBeAnimated = $(".preloader");
    console.log('lets start animation');
    preload(toBeAnimated[currentAnimat]);
});

function preload(elem) {
    var elem = $(elem);
    var width = elem.outerWidth();
    // Tween out preload div
    TweenMax.to(elem, 1.4, {
        width: 0,
        right: 0,
        onComplete: function() {
            elem.remove();
            currentAnimat++;
            if(currentAnimat >= toBeAnimated.length) {
                console.log('Animation done');
            } else {
                preload(toBeAnimated[currentAnimat]);
            }
        }
    });
}

});

【讨论】：

谢谢。这就是我想要实现的。一件事，是否也可以以相反的顺序制作动画。这是因为我已经使用 rtl 在我的布局中正确定位元素。
你可以......你必须在调用preload(toBeAnimated[currentAnimat])之前反转toBeAnimated