如何使用延迟TweenMax.to进行动画制作？

我使用TweenMax创建了一个动画，该动画将div的宽度从其父元素的100％宽度变为零。我有三个彼此相邻的div，它们与下面的图片重叠。现在我希望每个preload div类将在前一个触发后几秒钟开始。如何使用延迟TweenMax.to进行动画制作？

我尝试类似setTimeout的东西，但我无法得到它的工作。我该如何达到上述目标？

CodePen：https://codepen.io/anon/pen/aWVZXL

来源

2017-05-06 Caspert

你想逐个删除....？ –

是的。所以当第一个div完成动画时，下一个应该开始，或者当它在动画的中间时，另一个将开始。 @MadhuMagar – Caspert

我已经改变了脚本。如果你愿意，请重构。

$(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]); 
      } 
     } 
    }); 
}

}）;

来源

2017-05-06 18:00:51

谢谢。这是我想要实现的。有一件事，是否也可以以相反的顺序进行动画制作。这是因为我已经使用rtl在我的布局中正确定位元素。 – Caspert

你可以...你必须在调用preload（toBeAnimated [currentAnimat]）之前反转'toBeAnimated'' –

如何使用延迟TweenMax.to进行动画制作？

回答

相关问题