Question

我正在使用CSS animations。我想点击检测用户所在的动画部分。可能吗？

我正在做一个像男孩（div）来回奔跑的游戏。当用户点击时，我需要为男孩下降设置动画，这意味着更改课程，以便可以启动不同的动画。但我需要知道这个男孩是向左还是向右移动以使用正确的下降动画。我该怎么做？

Answer 1

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

以下是我使用CSS过渡而不是动画制作的快速示例。

HTML

<div id='boy'></div>

CSS

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

的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);
});

Demo

<强>更新

使用CSS动画（ Webkit浏览器的设置）也是如此：

Demo

您还可以使用单个动画，并使用elapsedTime事件的animationiteration属性来制作奇特的数学内容。

Answer 2

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

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

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

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

2 个答案:

Demo

Demo