jQuery - 动画完成持续时间答案

【问题标题】：jQuery - animationComplete durationjQuery - 动画完成持续时间
【发布时间】：2019-07-20 00:24:33
【问题描述】：

我的项目使用 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;

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

【问题讨论】：

你也可以使用 jquery animate。
嗨丹尼尔，过渡是在 css 中完成的，我无法更改它。有没有更好的方法来用 javascript 收听它？
Callback when CSS3 transition finishes的可能重复

标签： javascript jquery css jquery-mobile

【解决方案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>

【讨论】：