javascript - GreenSock TimelineMax提早开始

我一直在尝试使动画在点击时触发，我通过TimelineMax创建了动画。我不知道为什么，但是它一直在触发该动画的第一个实例，有5个.blackout-panel，并且它会自动为第一个.blackout-panel播放动画，但是我不知道为什么-我想要完整的动画动画由点击控制。

var showBarsTL = new TimelineMax({ paused: true, onComplete: killAnimation });

$('.portfolio-panel').on("click", function () {
    showBarsTL.play()
});

showBarsTL.add (TweenMax.staggerTo(".blackout-panel", 0, {y:100+ '%', onStart: "", onStartParams:["{self}"], ease: Power1.easeInOut}, 0.1275, 0));
showBarsTL.add (TweenMax.from(".blackout-panel", 0, {css:{top:"auto", bottom:"0"}}));
showBarsTL.add (TweenMax.staggerTo(".blackout-panel", 0, {css:{height:"0", bottom:"0", top:"auto"}, delay: 0.1275, ease: Power1.easeInOut}, 0.1275));

function killAnimation() {
    showBarsTL.clear();
}

我创建了一个codePen来演示这一点：http://codepen.io/Tekkie/pen/XpBOYV/?editors=1010

任何指导将不胜感激。而且我的killAnimation函数似乎没有被解雇。

编辑：1-我已经通过延迟解决了暂停问题。我的新JS如下：

var $blackoutPanels = $('.blackout-panel');
var showBarsTL = new TimelineMax({ paused: true });

showBarsTL
.add (TweenMax.staggerTo($blackoutPanels, **0.1275**, {y:100+ '%', onStart: "", onStartParams:["{self}"], ease: Power1.easeInOut}, 0.1275, 0))
.add (TweenMax.from($blackoutPanels, 0, {css:{top:"auto", bottom:"0"}}))
.add (TweenMax.staggerTo($blackoutPanels, 0, {css:{height:"0", bottom:"0", top:"auto"}, delay: 0.1275, ease: Power1.easeInOut}, 0.1275));

$('.portfolio-panel').on("click", function () {
    showBarsTL.play();
});

编辑：2-我使用以下JS解决了所有问题：

    var $blackoutPanels = $('.blackout-panel');
    var showBarsTL = new TimelineMax({
        paused: true
    });

    showBarsTL
        .add(TweenMax.staggerFrom($blackoutPanels, 0, {
            yPercent: -100,
            top: -100 + "%",
            onStartParams: ["{self}"],
            ease: Power0.easeInOut
        }, 0, 0))
        .add(TweenMax.staggerTo($blackoutPanels, 0.3, {
            yPercent: 0,
            top: 0,
            onStartParams: ["{self}"],
            ease: Power1.easeInOut
        }, 0.125, 0))
        .add(TweenMax.to($blackoutPanels, 3, {
            yPercent: +100,
            top: +100 + "%",
            onStartParams: ["{self}"],
            delay: 0.3,
            ease: SlowMo.ease.config(0.4, 1, false)
        }, 0.3, 0))
        .add(TweenMax.to($blackoutPanels, 0, {
            yPercent: -100,
            top: -100 + "%",
            delay: 0.375
        }));

    $('.portfolio-panel').on("click", function() {
        showBarsTL.restart(false, false);
    });

最佳答案

尝试这样设置暂停：

var showBarsTL = new TimelineMax({onComplete: killAnimation }).paused(true);

并在您的职能：

$('.portfolio-panel').on("click", function () {
showBarsTL.paused(false);
});

关于javascript - GreenSock TimelineMax提早开始，我们在Stack Overflow上找到一个类似的问题：https://stackoverflow.com/questions/42113680/