当动画的一部分时，标签不会激活关联的字段

Question

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

这是代码的最低版本：

@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>

即使在骰子滚动时，问题也发生在，即使当骰子滚动时，label单击时它也不总是采取措施，并且label未激活与关联的单选按钮。有时确实如此，有时却没有。

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

为什么会这样呢？我该如何解决？

Answer 1

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

这是一个更好的问题说明，您永远无法通过单击标签来检查输入：

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事件不会完成。在某些情况下，您的示例也会发生同样的情况。

解决此问题的一种方法是允许单击结束，方法是将被单击的元素放在顶部，直到单击事件结束。

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

.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>