jQuery - animationComplete持续时间

Question

我的项目使用jQuery移动库中提供的animationComplete函数 - https://code.jquery.com/mobile/1.4.5/jquery.mobile-1.4.5.js

由于一系列对象是动画以及要在每个动画点上执行的一堆执行，因此animationComplete函数可用作执行所需函数的良好回调。

但是，如果持续时间在库中有意增加3倍，则animationComplete回调的持续时间似乎会延迟。

// 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;

有没有更好的方法来实现相同的目标（可能没有使用库）？

Answer 1

您可以使用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>