过渡延迟在 Chrome 和 Safari 中不起作用

Question

编辑

我现在已经可以使用了，但我仍然不确定我是如何修复它的。如果有人知道发生了什么，我很想听听。

我正在制作动画菜单图标，效果很好...除了中间栏的过渡。它应该在第一个动画期间顶部和底部条聚集在一起后使用 transition-delay 消失，并在顶部和底部条再次相遇后出现第二个（两个实例中的三分之一）。中间栏没有动画，只有 background-color 属性上的过渡。我已经尝试使用 shorthand transition 和显式 transition-delay 属性。两者给出完全相同的结果。整个过程在 IE 和 Firefox 中运行良好，但在 Chrome 和 Safari 中失败，这让我认为这可能是一个 webkit 问题。

我这里只post相关代码（因为整件事差不多有两百行）。其余内容可在 codepen 获得。如果您认为我应该添加更多代码，请告诉我，我会添加更多。

CSS:

#menu label span.icon,
#menu.lightbox label span.icon {
  height: 5em;
  width: 5em;
  display: block;
  background-color: rgba(255, 255, 255, 1);
  background-clip: content-box;
  padding: 2em 0;
  transition: background-color 0s 1.66s;
}

#menu input[type=checkbox]:checked ~ label span.icon {
  background: rgba(255, 255, 255, 0);
  background-clip: content-box;
}

HTML:

<form id="menu" name="dateChooser">
  <input id="toggle" type="checkbox">
  <label for="toggle" onclick="addLightBox(this)"><span class="icon"></span></label>
  <fieldset>
  </fieldset>
</form>

真正让我感到困惑的是我在其他地方使用 transition-delay 并且它工作得很好。我在 <fieldset> 上使用它来创建灯箱效果。以防万一，这也是该代码：

fieldset {
  background: rgba(0, 0, 0, 0);
  transition: background 5s, width 0s 5s, height 0s 5s;
}

#menu.lightbox input[type=checkbox]:checked ~ fieldset {
  background-color: rgba(0, 0, 0, .6);
  transition: background 5s;
}

知道我做错了什么吗？

更多信息。我正在使用复选框 hack 来启动 animations/transitions，顶部和底部栏的伪元素，以及一点点 javascript 以保持动画从运行加载。但所有这些似乎都工作得很好。我还在 codepen 中使用了 autoprefixer，所以我很确定这不是前缀问题。

这里有一些 gif 动画显示了正确的动画和错误的动画。

正常工作：

中间栏没有延迟：

Answer 1

将每组css规则一一去除后，终于找到了罪魁祸首。事实证明，导致问题的代码从未出现在 Whosebug 上，而是在 codepen 中。这是有问题的代码：

CSS:

#menu input[type=checkbox]:checked ~ label {
  margin: 0;
  height: 100vh;
  width: 100vw;
  display: block;
  background: rgba(0, 0, 0, 0);
  position: relative;
  z-index: 99;
  top: 0;
  left: 0;
  cursor: default;
}

HTML:

<form id="menu" name="dateChooser">
  <input id="toggle" type="checkbox">
  <label for="toggle" onclick="addLightBox(this)"><span class="icon"></span></label>
  <fieldset>
  </fieldset>
</form>

问题不在于 span.icon，而是因为每当切换复选框时它的父项都会发生变化。标签的更改是即时的，所以我假设他们也迫使 span.icon 快速更改。我真的不确定为什么 Chrome 和 Safari 有这个问题，而 Firefox 和 IE11 没有（我很好奇并下载了 Opera。它像 Chrome 一样失败了）。

修复相当简单。只需确保将标签设置为不会中断过渡的内容（这意味着我 fiddle 直到我开始工作）。我希望有人能帮助我了解发生了什么以及为什么它现在已修复，但我很高兴它能正常工作。

这是修复它的添加的 CSS 规则：

#menu label {
  margin: 0;
  display: block;
}

这么小的修复。

这是工作代码的 demo（已加快速度，因此不会慢得让人痛苦）。

过渡延迟在 Chrome 和 Safari 中不起作用

Transition-delay not working in Chrome and Safari

css

safari

google-chrome

css-transitions

编辑