jQuery - 动画完成持续时间

Posted 2023-05-08

【中文标题】jQuery - 动画完成持续时间

【英文标题】：jQuery - animationComplete duration

【发布时间】：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的可能重复

【参考方案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>