当动画的一部分时，标签不会激活关联的字段 [英] Labels don't activate associated fields when part of an animation

问题描述

玩网络技术，我只使用HTML和CSS（没有JavaScript）开发了一个骰子。这是一个简单的系统：一系列单选按钮和标签，它们通过更改其位置来模拟骰子（使用 z-index ），因此每次单击骰子时，一个随机数字。

Playing with web technologies, I developed a dice using just HTML and CSS (without JavaScript). It's a simple system: a series of radio buttons and labels that simulate the dice by changing their positioning (with z-index) so every time that you click on the dice, there's a "random" number.

这是该代码的最低版本：

This is a minimal version of the code:

@keyframes changeOrder {
  from { z-index: 6;}
  to { z-index: 1; }
}

@-webkit-keyframes changeOrder {
  from { z-index: 6; }
  to { z-index: 1; }
}

label {
  display: block;
  position: absolute;
  display: block;
  width: 50px;
  height: 50px;
  line-height:50px;
  background: #eeeeee;
  text-align: center;
  animation: changeOrder 1.2s infinite;
}

label:nth-of-type(1) { animation-delay: 0s; }
label:nth-of-type(2) { animation-delay: -0.2s; }
label:nth-of-type(3) { animation-delay: -0.4s; }
label:nth-of-type(4) { animation-delay: -0.6s; }
label:nth-of-type(5) { animation-delay: -0.8s; }
label:nth-of-type(6) { animation-delay: -1.0s; }

<input type="radio" name="cb" id="cb1" value="1"/>
<input type="radio" name="cb" id="cb2" value="2"/>
<input type="radio" name="cb" id="cb3" value="3"/>
<input type="radio" name="cb" id="cb4" value="4"/>
<input type="radio" name="cb" id="cb5" value="5"/>
<input type="radio" name="cb" id="cb6" value="6"/>
<label for="cb1">1</label>
<label for="cb2">2</label>
<label for="cb3">3</label>
<label for="cb4">4</label>
<label for="cb5">5</label>
<label for="cb6">6</label>

即使骰子在滚动 时，当<$单击c $ c> label ，并且未激活与 label 相关的单选按钮。有时候会，有时候不会。

The problem happens when, even when the dice is rolling, it not always takes action when the label is clicked on, and the radio button associated to the label is not activated. Sometimes it does, sometimes it doesn't.

我认为可能是因为我使用了动画，并且（不成功地）与时俱进，看是否能解决问题……但是基本上仍然存在相同。我注意到，如果我延长时间，问题就会消失（即，将时间更改为3s，并延迟0.5s或更长时间）。但是，如果这样做，它是可以预测的（目标不是使其完美，而是至少模拟一些伪随机性。）

I thought it could be because of the animation I used, and (unsuccessfully) played with the times to see if that would fix the problem... but it basically remains the same. I noticed that if I extend the times, the issue "disappears" (i.e. changing the times to 3s and delays in 0.5s or higher). But if I do that, it is more predictable (the goal is not to make it perfect but at least simulate some pseudo-randomness).

为什么会发生这种情况？我该怎么做才能解决它？

Why could this be happening? What can I do to fix it?

推荐答案

正如您已经注意到的那样，问题出在动画的速度上。更改要比点击快，因为点击是两个操作： mousedown 和 mouseup 两者都应在

As you already noticed it, the issue is due to how fast the animation is. The changes is faster than the click because a click is two actions: mousedown and mouseup and both should be done on the same element.

这里是一个更好的例子，您永远无法通过单击标签来检查输入：

Here is a better illustration of the issue where you can NEVER make the input checked by clicking on the labels:

label {
  display: block;
  position: absolute;
  display: block;
  width: 50px;
  height: 50px;
  line-height:50px;
  background: #eeeeee;
  text-align: center;
}

label:active {
  background:red;
  z-index:-1;
}

<input type="radio" name="cb" id="cb1" value="1">
<input type="radio" name="cb" id="cb2" value="2">
<label for="cb1">1</label>
<label for="cb2">2</label>

单击时，该元素将被隐藏，并且 mouseup 将不再位于同一元素上，因此click事件为尚未完成。在某些情况下，您的示例也会发生同样的情况。

When clicking, the element will be hidden and the mouseup will no more be on the same element thus the click event is not done. The same is happening with your example is some cases.

解决此问题的一种方法是允许点击以

An Idea to fix this is to allow the click to end by making the clicked element on the top until the end of the click event.

这里是一个想法，我依赖具有较大的伪元素z-index ，这样我就可以将click事件保留在所需的元素上。您还可以使动画更快！

Here is an idea where I rely on a pseudo element with a big z-index so I can keep the click event on the needed element. You can also make the animation faster!

.container {
 position:relative;
}
label {
  display:block;
  position: absolute;
  top:0;
  left:0;
  width: 50px;
  height: 50px;
  line-height:50px;
  background: #eeeeee;
  text-align: center;
  animation: changeOrder 0.6s infinite;
}
@keyframes changeOrder {
  from { z-index: 6;}
  to { z-index: 1; }
}
label:nth-of-type(1) { animation-delay: 0s; }
label:nth-of-type(2) { animation-delay: -0.1s; }
label:nth-of-type(3) { animation-delay: -0.2s; }
label:nth-of-type(4) { animation-delay: -0.3s; }
label:nth-of-type(5) { animation-delay: -0.4s; }
label:nth-of-type(6) { animation-delay: -0.5s; }

label:active {
  /*Mandatory to break the stacking context and allow 
   the pseudo element to be above everything*/
  position:static; 
  /*For illustration*/
  margin-left: 50px;
  background:red;
}

label:active::before {
  content:"";
  position:absolute;
  top:0;
  right:0;
  left:0;
  bottom:0;
  z-index:10;
}

<input type="radio" name="cb" id="cb1" value="1">
<input type="radio" name="cb" id="cb2" value="2">
<input type="radio" name="cb" id="cb3" value="3">
<input type="radio" name="cb" id="cb4" value="4">
<input type="radio" name="cb" id="cb5" value="5">
<input type="radio" name="cb" id="cb6" value="6">
<div class="container"> 
 <label for="cb1">1</label>
 <label for="cb2">2</label>
 <label for="cb3">3</label>
 <label for="cb4">4</label>
 <label for="cb5">5</label>
 <label for="cb6">6</label>
</div>

这篇关于当动画的一部分时，标签不会激活关联的字段的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！