javascript - 动画结束后的 TweenMax

Question

当第一个动画完成后，我想在同一个目标上制作另一个动画。

var lnk = document.querySelector('#clickme');
var tl = new TimelineMax();

lnk.addEventListener('click', go, false);

function go(){
    tl.to('.glasko', 1, {width: 500, height: 500});
};

然后我想改变div的背景颜色。

tl.to('.glasko', 2, {backgroundColor: 'red'});

这方面的最佳做法是什么？

Answer 1

GSAP 使用 TimelineMax 使其变得简单易行。您只需使用相同的 TimelineMax 实例在第一个动画之后编写第二个动画，这是最好的方法。

var lnk = document.querySelector('#clickme');
var tl = new TimelineMax();

lnk.addEventListener('click', go, false);

function go(){
    tl.to('.glasko', 1, {width: 500, height: 500});
    tl.to('.glasko', 2, {backgroundColor: 'red'});
};

demo