javascript - GreenSock TimelineMax 提前开始

Question

我一直在尝试让动画在点击时触发，我已经通过 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);
    });

Answer 1

尝试像这样设置暂停:

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

在你的函数中:

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