过渡延迟延迟

一段时间前，我们介绍了 一种处理弹出信息的很酷的“悬停”技巧，该技巧由 Doug Neiner 提供，当您将鼠标悬停在图片上时，会显示一个信息弹出窗口。您第一次悬停时，会有一个延迟。这是为了防止意外或快速经过的鼠标悬停，而不是有意地关注特定图片。后续悬停会立即显示弹出窗口。其理念是您已处于探索模式。

Doug 使用 jQuery 进行动画和一些花哨的操作来跟踪悬停状态及其行为方式。让我们使用带有延迟的 CSS 过渡以不同的方式来实现，然后仅使用少量的 jQuery 来跟踪状态。

用例

假设您有一行功能按钮。用户可以单击按钮，或使用触发该功能的键盘命令。高级用户喜欢键盘命令，但需要先学习它们，有时需要提醒。因此，您决定使用某种弹出窗口，在将鼠标悬停在按钮上时显示该命令。

但是移动设备没有悬停功能！正确，或者键盘，因此在这种用例中键盘命令将很有用。

标题属性？

您可以选择的一种方法是标题属性。

<a href="#" class="function button" title="⌘G">Do Thing</a>

这是一种完全不错的方法。当您将鼠标悬停在其上时，您将获得如下所示的标准标题弹出窗口

实际上，标题属性的默认行为与我们描述的一样。第一次悬停需要一段时间才能显示弹出窗口，但其他快速悬停的链接会立即显示，直到给定足够的时间让活动弹出窗口完全淡出。

不错。但是……无法控制设计（来吧，影子 DOM！），无法控制特定功能，并且您将在稍后看到，不允许生成内容。

手动

相反，让我们手动操作。我们将命令直接放在标记中

<nav>
  <a href="#" class="button">
    Cut
    <span class="command">
      <span class="screen-reader-text">Keyboard Command:</span>
      <span class="mod">X</span>
    </span>
  </a>
  ...
</nav>

这样，我们将

• 仅显示移动设备的按钮
• 能够在桌面设备上悬停时显示键盘命令
• 向屏幕阅读器宣布随机字母的作用（它是键盘命令）
• 应用正确的修饰键，无需更改标记
• 保持其语义合理

过渡延迟：打开时延迟/关闭时立即

现在我们有了可以使用的标记，您可以根据需要设置弹出信息的外观。

.button {

  /* Button styling */

  position: relative;
}
.command {
  
  /* Popup styling */

  position: absolute;
  opacity: 0; /* Not shown by default */
}

在功能上，我们将应用一秒钟的延迟，然后再显示弹出窗口（降低烦人程度），但在移开鼠标时立即删除弹出窗口。我们曾经 了解过 这一点。

.command {
   transition: opacity 0.2s 0 ease;  /* Mouse leave: immediate */
}
.button:hover .command {
   transition: opacity 0.2s 1s ease; /* Mouse enter: delay */
}

以上内容是未添加前缀的，但请记住，对于过渡，请使用 -webkit-、-moz-、-ms- 和 -o-。或者使用 Compass 并执行 @include transition(opacity 0.2s 0 ease);

过渡延迟延迟：仅在聚焦时立即

上面的 CSS 使我们完成了其中一半，但它会将延迟应用于每个悬停按钮。这意味着探索所有快捷方式会很慢、很乏味，并且会影响我们快速思考的大脑。我们希望在证明我们已在导航区域内使用鼠标足够长时间后删除延迟。

使用 jQuery，我们将根据我们希望其行为方式为导航元素应用类。进入导航区域后，我们将等待一秒钟，然后应用名为“immediate”的类。退出时，我们将删除该类。

$("nav").hover(function() {
  
  /* Mouse enter */
  var nav = $(this);
  setTimeout(function() {
    nav.addClass("immediate");
  }, 1000);
  
}, function() {
  
  /* Mouse leave */
  $(this).removeClass("immediate");
  
});

nav.immediate .command {
  transition-delay: 0s !important; 
}

我们只需要变得更花哨一点，应用和删除“out”类。这样，如果用户将鼠标悬停半秒钟然后移开，超时仍会触发并提供“immediate”类，但“out”类将使其失效。以下是完整的 JS

$("nav").hover(function() {
  
  /* Mouse enter */
  var nav = $(this).removeClass("out");
  setTimeout(function() {
    nav.addClass("immediate");
  }, 1000);
  
}, function() {
  
  /* Mouse leave */
  $(this)
    .addClass("out")
    .removeClass("immediate");
  
});

使用“out”类，将恢复延迟

nav.out .command {
  transition-delay: 1s !important;
}

演示和下载

我将 演示发布在 CodePen 上。如果您想下载副本，可以单击“共享”按钮，然后单击“导出为 .zip”。

笔记

CodePen 演示包含应用“mac”或“pc”类（应用修饰键）的 JavaScript 代码段。警告：用户代理检测很粗糙。但是还有其他方法可以做到吗？

OS X Voice Over 中存在一个错误（或者在我看来是错误），它将按钮读作

⌘ 剪切键盘命令：X

而不是

剪切键盘命令：⌘X

伪元素特别应用的位置。更好的方法是

剪切 [短暂暂停] [柔和的声音]键盘命令：⌘X[/柔和的声音结束]

也许吧，无论如何。