TweenLite: спам-клики нарушают анимацию - PullRequest
Новая
       63

TweenLite: спам-клики нарушают анимацию

0 голосов
/ 28 июня 2018

У меня есть несколько вкладок, при нажатии на которые содержимое анимируется с помощью 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"});

Вот шапка поведения:

enter image description here

1 Ответ

0 голосов
/ 28 июня 2018

В прошлом мне удавалось установить какое-то состояние анимации и проверить, активна ли анимация, если она неактивна, вы можете запустить анимацию 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"});
        }
    );
}

Пользователь может щелкнуть столько раз, сколько он хочет, но анимация не выйдет из синхронизации

...