时间戳

首页 > 解决方案 > TweenMax staggerFromTo() onCompleteAll 不等待补间完成

javascript - TweenMax staggerFromTo() onCompleteAll 不等待补间完成

问题描述

我正在使用静态 staggerFromTo() 在按钮单击时为孩子设置动画。查看文档，第 6 个参数是 onCompleteAll，它应该在整个补间序列完成后调用。

当我使用它时，onCompleteAll 参数中的函数在 Tween 启动时调用，而不是在它完成时调用。如果您查看下面的小提琴并打开控制台，您可以在单击按钮后立即看到它记录“完成”。

难道我做错了什么？我不明白参数是如何工作的吗？

$('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>

标签： javascriptgsap

解决方案

主要问题是您通过()在函数名称后添加 立即调用该函数。你应该只是通过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');
}

推荐阅读