jQuery - анимация, полная продолжительность - PullRequest
Новая
       9

jQuery - анимация, полная продолжительность

0 голосов
/ 26 февраля 2019

В моем проекте используется функция animationComplete, предусмотренная в мобильной библиотеке jQuery - https://code.jquery.com/mobile/1.4.5/jquery.mobile-1.4.5.js

Поскольку последовательность объектов - это анимация, а также последовательность выполнения, выполняемая в каждой точке анимации, *Функция 1005 * служит хорошим обратным вызовом для выполнения необходимых функций.

Однако длительность обратного вызова animationComplete, по-видимому, задерживается, учитывая, что продолжительность намеренно увеличивается в 3 раза в библиотеке).

// Parse the durration since its in second multiple by 1000 for milliseconds
// Multiply by 3 to make sure we give the animation plenty of time.
duration = parseFloat(
    $( this ).css( props[ animationType ].duration )
 ) * 3000;

Есть ли лучший способ достичь той же цели (возможно, без использования библиотеки)?

1 Ответ

0 голосов
/ 26 февраля 2019

Вы можете использовать EventListener animationend, чтобы проверить конец анимации CSS.

const myBtn = document.getElementsByTagName('button')[0];
const myH1 = document.getElementById('myh1');

const removeClass = (e) => {
  console.log('animation ends');
  e.target.classList.remove('animated', 'bounce');
}

const animate = () => {
  myH1.classList.add('animated', 'bounce');

  myH1.addEventListener("webkitAnimationEnd", removeClass);
  myH1.addEventListener("mozAnimationEnd", removeClass);
  myH1.addEventListener("MSAnimationEnd", removeClass);
  myH1.addEventListener("oanimationend", removeClass);
  myH1.addEventListener("animationend", removeClass);
}

myBtn.addEventListener('click', animate);
@-webkit-keyframes bounce {
  from,
  20%,
  53%,
  80%,
  to {
    -webkit-animation-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1);
    animation-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1);
    -webkit-transform: translate3d(0, 0, 0);
    transform: translate3d(0, 0, 0);
  }
  40%,
  43% {
    -webkit-animation-timing-function: cubic-bezier(0.755, 0.05, 0.855, 0.06);
    animation-timing-function: cubic-bezier(0.755, 0.05, 0.855, 0.06);
    -webkit-transform: translate3d(0, -30px, 0);
    transform: translate3d(0, -30px, 0);
  }
  70% {
    -webkit-animation-timing-function: cubic-bezier(0.755, 0.05, 0.855, 0.06);
    animation-timing-function: cubic-bezier(0.755, 0.05, 0.855, 0.06);
    -webkit-transform: translate3d(0, -15px, 0);
    transform: translate3d(0, -15px, 0);
  }
  90% {
    -webkit-transform: translate3d(0, -4px, 0);
    transform: translate3d(0, -4px, 0);
  }
}

@keyframes bounce {
  from,
  20%,
  53%,
  80%,
  to {
    -webkit-animation-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1);
    animation-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1);
    -webkit-transform: translate3d(0, 0, 0);
    transform: translate3d(0, 0, 0);
  }
  40%,
  43% {
    -webkit-animation-timing-function: cubic-bezier(0.755, 0.05, 0.855, 0.06);
    animation-timing-function: cubic-bezier(0.755, 0.05, 0.855, 0.06);
    -webkit-transform: translate3d(0, -30px, 0);
    transform: translate3d(0, -30px, 0);
  }
  70% {
    -webkit-animation-timing-function: cubic-bezier(0.755, 0.05, 0.855, 0.06);
    animation-timing-function: cubic-bezier(0.755, 0.05, 0.855, 0.06);
    -webkit-transform: translate3d(0, -15px, 0);
    transform: translate3d(0, -15px, 0);
  }
  90% {
    -webkit-transform: translate3d(0, -4px, 0);
    transform: translate3d(0, -4px, 0);
  }
}

.bounce {
  -webkit-animation-name: bounce;
  animation-name: bounce;
  -webkit-transform-origin: center bottom;
  transform-origin: center bottom;
}

.animated {
  -webkit-animation-duration: 2s;
  animation-duration: 2s;
  -webkit-animation-fill-mode: both;
  animation-fill-mode: both;
}
<h1 id="myh1">Animate me</h1>
<button>click to animate</button>
...