动画结束后的 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

动画结束后的 TweenMax

TweenMax after animation finished

javascript

animation

gsap