有没有办法在重复转换之前添加“冷却”延迟或要求用户输入？答案

【问题标题】：Is there a way to add a 'cool down' delay or require user input before repeating a transition,?有没有办法在重复转换之前添加“冷却”延迟或要求用户输入？
【发布时间】：2019-02-13 00:31:20
【问题描述】：

使用 CSS 编码图像或框以在悬停时移动时会出现意外结果。如果鼠标在过渡开始时位于点击区域中但不在结束时的位置，则过渡效果将无限重复并在没有延迟的情况下出现卡顿。以下是该问题的快速 html/css 演示：

div {

  height:			200px;
  width:			200px;
  background-color:	red;

}

div:hover {

  margin-left:		100px;

}

<!doctype html> <html> 

<head> <title> Hover / Transition Demo </title> 
<link rel="stylesheet" type="text/css" href="stylesheet.css"></head> 

<body>

<div> </div>

</body> 

</html>

要重现该问题，请将鼠标悬停在红色框的左侧，这应该会导致方块左右快速移动。

有没有一个干净的方法来解决这个碍眼的问题？有几种解决方案可能会发生：盒子停留在起始位置；或结束位置；有一个延迟只适用于这种情况，以避免口吃效应；或者鼠标需要在过渡重复之前移动至少一个像素。理想情况下，我想要所有这些解决方案，但只有一个会很棒！提前致谢。

【问题讨论】：

我通常会尝试确保任何使用变换的动画都不会改变悬停触发器的位置或大小。这将涉及更多的标记来完成，但基本上您将创建一个保持其位置并捕获鼠标事件的包装器。然后，动画在改变元素的位置时变得严格视觉而不是功能。

标签： html css hover css-transitions

【解决方案1】：

这不是一个完美的解决方案，但这证明了我在评论中试图传达的内容。悬停状态在红色框的父级上。您可以将光标拖动到红色框上这一事实表明，将鼠标悬停在红色框上仍然会触发悬停效果。这是因为负边距增加了.wrapper 的宽度，但这是基本概念。如果您需要更详细的解决方案，则必须提供有关您正在处理的具体案例的更多信息，而不是这个简单的演示。

编辑：我已更新代码以使用pointer-events:none。 better supported 比我想象的要高（IE 11+）。这是一条 CSS 规则，它告诉浏览器忽略源自具有样式规则的元素的鼠标事件（在本例中为:hover）。

.wrapper {
  height:			200px;
  width:			200px;
}

.box {

  height:			200px;
  width:			200px;
  background-color:	red;
  pointer-events: none;

}

.wrapper:hover .box {

  margin-left:		100px;

}

<!doctype html> <html> 

<head> <title> Hover / Transition Demo </title> 
<link rel="stylesheet" type="text/css" href="stylesheet.css"></head> 

<body>

<div class="wrapper">
<div class="box"> </div>
</div>

</body> 

</html>

【讨论】：