аниме. js play () и обратное () при случайном нажатии - PullRequest
Новая
       154

аниме. js play () и обратное () при случайном нажатии

0 голосов
/ 13 июля 2020

Я создал анимацию с аниме. js, все работает нормально с анимацией, но я получаю странное поведение при нажатии на элемент. Иногда щелчок запускает анимацию, а иногда нет, console.log('clicked') запускается каждый раз, поэтому я предполагаю, что что-то не так с кодом «анимации». Есть идеи, как отладить эту проблему? 

  const bodyWork = document.getElementById("body-work__item");
  const bodyWorkLine = document.getElementById("body-work__line");
  const bodyText = document.getElementById("bodyText");

  const bodyWorkAnime = anime.timeline({
    targets: bodyWork,
    translateY: -60,
    opacity: 1,
    direction: "alternate",
    loop: false,
    autoplay: false,
    easing: "easeInOutSine",
    duration: 500
  });

  bodyWorkAnime.add({
    targets: bodyWorkLine,
    height: 60,
    direction: "alternate",
    loop: false,
    autoplay: false,
    easing: "easeInOutSine"
  });

  bodyWorkAnime.add({
    targets: bodyText,
    opacity: 1,
    left: 0,
    direction: "alternate",
    loop: false,
    easing: "spring(1, 80, 30, 0)"
  });


  const clicked = false;

  $(".body-work").on("click", function () {
    if (clicked) {
      bodyWorkAnime.reverse();
      console.log("clicked reverse");
      clicked = false;
    } else {
      bodyWorkAnime.play();
      console.log("clicked");
      clicked = true;
    }
  });
...