TweenLite：垃圾邮件点击会破坏动画

Question

我有一些选项卡，单击这些选项卡时，将使用TweenLite对内容进行动画输入/输出。如果您非常快地单击选项卡，则会中断动画，最终看不到任何内容。我尝试了killTweensOf，但没有帮助。

以下是所有动画代码：

TweenLite.killTweensOf($elOldContent);
TweenLite.killTweensOf($elTargetContent);

//Move current tab content out of frame to the left and fade out.
TweenLite.to($elOldContent, .75, {left:"-300px",opacity:"0",onComplete:function() {
    //Hide, reset the position and opacity.
    $elOldContent.removeClass('active').hide().css({"left":"0","opacity":"1"});
    }
});

//Make the new content active, set opacity to zero and move off screen to right in preparation for grand entrance
$elTargetContent.addClass('active').css({"opacity":"0","left":"300px"}).show();
//Move into frame from right, fade in
TweenLite.to($elTargetContent, .75, {left:"0px",opacity:"1"});

这是行为的上限：

Answer 1

过去对我有用的是设置某种动画状态并测试该动画是否处于活动状态，如果不处于活动状态，则可以触发TL动画，如果处于活动状态，则基本上返回false。

尝试类似

let isAnim = false;

if (isAnim === false) {
    //Animation is not running run 

    TweenLite.to($elOldContent, .75, {left:"-300px", opacity:"0", 
        onStart: function(){
            isAnim = true;
        },
        onComplete: function(){
            isAnim = false;

            //Hide, reset the position and opacity.
            $elOldContent.removeClass('active').hide().css({"left":"0","opacity":"1"});
        }
    );
}

用户可以点击任意次数，但动画不会不同步