javascript - jQuery - animationComplete 持续时间

Question

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

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

但是，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;

是否有更好的方法来实现相同的目标(也许不使用该库)？

Answer 1

您可以使用事件监听器 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>