我可以用 JavaScript 检测我们在 CSS 关键帧动画中的百分比吗答案

【问题标题】：Can I detect with JavaScript where we are percentage wise in a CSS Keyframe animation我可以用 JavaScript 检测我们在 CSS 关键帧动画中的百分比吗
【发布时间】：2016-11-23 15:00:19
【问题描述】：

我在想。我知道我可以通过监听动画开始、动画迭代、动画结束事件（显然我们在那里缺少浏览器前缀）来检测 CSS 动画何时开始、结束或重复，例如：

document.getElementById('identifier')
        .addEventListener("animationstart", function(){
          // do something...
        });

但我想知道，是否有可能确定我们在哪里运行 CSS 动画，例如，当我们处于 50% 的关键帧动画时，我可以如何监听：

<!DOCTYPE html>
<html>
<head>
<style>
#animateDiv {
    width: 100px;
    height: 100px;
    background-color: red;
    position: relative;
    animation-name: example;
    animation-duration: 4s;
}

@keyframes example {
    0%   {background-color:red; left:0px; top:0px;}
    25%  {background-color:yellow; left:200px; top:0px;}
    50%  {background-color:blue; left:200px; top:200px;}
    75%  {background-color:green; left:0px; top:200px;}
    100% {background-color:red; left:0px; top:0px;}
}
</style>
</head>
<body>
<div id="animateDiv"></div>
<script>
// what do I do here? How do I listen for the 50% event of the keyframes?
document.getElementById('animateDiv').addEventListener('animation at 50%?', function() {
 console.log('got it');
})
</script>
</body>
</html>

【问题讨论】：

我不这么认为。除非您在动画旁边运行并发计时器功能。
stackoverflow.com/questions/18006099/…
codepen.io/Zeaklous/pen/GwBJa
css-tricks.com/…

标签： javascript css css-animations

【解决方案1】：

祝你好运。这是我的看法。

获取动画持续时间。
像 Vini 建议的那样在上面撒点数学。
setTimeout()

代码：

const fn_runAtKeyframe = (DOMElement, keyframe, callback) => {
  const animationDuration = window.getComputedStyle(DOMElement).animationDuration;
  // animationDuration returns string, e.g. "5s" or "500ms", so need to parseInt()
  // if it is in seconds, change it to milliseconds
  let animationKeyframe
  if (animationDuration.replace(/[0-9]/g, '') === "s") {
    animationKeyframe = parseInt(animationDuration) * keyframe * 1000
  } else {
    animationKeyframe = parseInt(animationDuration) * keyframe
  }

  const doStuff = (e) => {
    setTimeout(() => {
      console.log(`Function "${callback.name}" will run at ${keyframe*100}% keyframe`)
      callback();
    }, animationKeyframe)
  }
  DOMElement.addEventListener("animationstart", doStuff); 
  // or use "animationiteration" depending on your usecase
}

运行它，

const animateDiv = document.querySelector("#animateDiv")
const keyframe = 0.5 // at 50% keyframe
const callback = () => {
  // do stuff here...
};
fn_runAtKeyframe(animateDiv, keyframe, callback)

【讨论】：

【解决方案2】：

就像 Vini 说你有这个机会，我为自己做这个，你可以为你想要的任何功能更改“动画播放状态：”。敬礼

//Animation pause at specific percentage, Example: pauseAnimationAt("myDiv",33,10)
    function pauseAnimationAt(l,p,d){
      percentage = p/d*1000;
      function pauseAnimation(){
        setTimeout(function(){ document.getElementById(l).style="animation-play-state: paused"; }, percentage);//l = Element ID, p = percentage when you wanna stopt animation, d = Duration of animation (Yes, you need to know that)
      }
      document.getElementById(l).addEventListener("animationstart", pauseAnimation());
    }

【讨论】：

【解决方案3】：

你好，伙计。我不知道您是否可以从 CSS 动画中获得准确的关键帧，但您可以使用一些数学来获得它，就像我们的伙伴 Paulie_D 建议的那样。

在您的代码中，您的动画长度为 4s，因此，动画的 50% 的关键帧在 2s 之后：

//......
//when the animation starts....
setTimeout(function(){
      //Enter your stuff here
}, 2000); //2 seconds delay, considering your animation length = 4s;

你也可以使用（需要jQuery）：

$("#animated_element").bind("half_animation", function(){
      //Ya stuff here
});
//.........
//When the animation starts...
setTimeout(function()
{
     $("#animated_element").trigger("half_animation");
}, 2000);

或者：

$("#animated_element").bind("half_animation", function(){
      once = 0;
      setTimeout(function()
      {
           //Ya stuff here....
      }, 2000)
});
//........
//When the animation starts
$("#animated_element").trigger("half_animation");

我希望它可以帮助你，伙计。

【讨论】：