我使用静态 staggerFromTo() 在按钮单击时为子级设置动画。看着documentation ,第 6 个参数是 onCompleteAll,它应该在整个补间序列完成后调用。
当我使用它时, onCompleteAll 参数中的函数会在 Tween 启动时调用,而不是在完成时调用。如果您查看下面的 fiddle 并打开控制台,您可以在单击按钮后立即看到它记录“完成”。
我做错了什么吗?我不明白这个参数是如何工作的吗?
$('button').on('click', function() {
TweenMax.staggerFromTo($('.wrapper').children(), 1, {
x: 0,
opacity: 1,
}, {
x: 50,
opacity: 0,
}, .2, logDone())
})
function logDone() {
console.log('done');
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/3.2.6/gsap.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<button>animate</button>
<div class="wrapper">
<div>
one
</div>
<div>
two
</div>
<div>
three
</div>
</div>
最佳答案
主要问题是您通过在函数名称后添加 ()
来立即调用该函数。您应该只传入 logDone
。
但是由于您已经加载 GSAP 3 ,为什么不使用GSAP 3语法?
这是我编写 JS 的方式:
$('button').on('click', function() {
gsap.fromTo('.wrapper > *', {
x: 0,
opacity: 1,
}, {
duration: 1,
stagger: 0.2,
x: 50,
opacity: 0,
onComplete: logDone
})
})
function logDone() {
console.log('done');
}
关于javascript - TweenMax staggerFromTo() onCompleteAll 不等待 Tweens 完成,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/61214382/