TweenMax staggerFromTo () onCompleteAll не ждет завершения Tweens - PullRequest
Новая
       68

TweenMax staggerFromTo () onCompleteAll не ждет завершения Tweens

0 голосов
/ 14 апреля 2020

Я использую stati c staggerFromTo () для анимации детей при нажатии кнопки. Глядя на документацию , 6-й параметр - onCompleteAll, который должен вызываться после завершения всей последовательности анимаций.

Когда я использую это, вызывается функция в параметре onCompleteAll. когда начинается анимация, а не когда она завершена. Если вы посмотрите на скрипку внизу и откроете консоль, вы увидите, что журнал «готов», как только вы нажмете кнопку.

Я что-то не так делаю? Я не понимаю, как работает параметр? 

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

1 Ответ

1 голос
/ 15 апреля 2020

Основная проблема заключается в том, что вы немедленно вызываете функцию, добавляя () после имени функции. Вы должны просто передать 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');
}
...