Javascript 用户单击时检测css动画中的点

我正在使用。我想点击检测用户在动画的哪一部分。可能吗

---

我在做一个游戏，一个男孩（div）来回跑。当用户单击时，我需要设置男孩摔倒的动画，这意味着更改类以便可以开始不同的动画。但我需要知道男孩是向左还是向右移动，以使用向右下落的动画。我该怎么做

您可以使用单独的CSS类来向左和向右移动，而不是一个，这样您就可以在给定的时间点检查当前类

下面是我使用CSS转换而不是动画制作的一个快速示例

HTML

jQuery

$("#boy").addClass("right");
  $("#boy").on("transitionend. webkitTransitionEnd",function(){
  $(this).toggleClass('right');
});

$("#boy").on("click",function(){
  var position = ($(this).hasClass("right"))?"right":"left";
  alert(position);
});

更新

使用CSS动画（针对webkit浏览器的设置）也是一样：

---

您还可以使用单个动画，并使用

animationiteration

事件的

elapsedTime

属性来进行奇特的数学运算。

到目前为止，最简单的方法是在关键帧中设置一个指示该时间的属性

我有时使用z-index，您可以在向右移动时将z-index设置为5，在向左移动时将z-index设置为6

---

通常，您可以获得一系列具有相同结果布局的z索引值。

您可以向我们展示代码吗？在两个不同的类之间切换以向左和向右移动，这样您就可以在给定的时间点检查当前类了。。？

#boy{
  position:absolute;
  top:0;
  left:0;
  width:50px;
  height:50px;
  background:red;
  transition:all 5s;
}
#boy.right{
  left:90%;
}

$("#boy").addClass("right");
  $("#boy").on("transitionend. webkitTransitionEnd",function(){
  $(this).toggleClass('right');
});

$("#boy").on("click",function(){
  var position = ($(this).hasClass("right"))?"right":"left";
  alert(position);
});