html - 标签在动画的一部分时不会激活相关字段

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 未激活。有时会，有时不会。

我认为这可能是因为我使用了动画，并且(未成功)播放时间以查看是否可以解决问题......但它基本上保持不变。我注意到如果我延长时间，问题就会“消失”(即将时间更改为 3 秒并延迟 0.5 秒或更高)。但如果我这样做，它会更可预测(目标不是让它完美，但至少模拟一些伪随机性)。

为什么会这样？我该怎么做才能修复它？

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 将不再位于同一元素上，因此不会完成点击事件。在某些情况下，您的示例也会发生同样的情况。

---

解决此问题的一个想法是通过使被点击的元素位于顶部直到点击事件结束来允许点击结束。

这是一个想法，我依靠一个带有大 z-index 的伪元素，这样我就可以将点击事件保留在所需的元素上。您还可以使动画更快!

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