z-index 转换延迟不起作用？答案

【问题标题】：z-index transition delay not working?z-index 转换延迟不起作用？
【发布时间】：2016-05-26 13:51:23
【问题描述】：

我创建了 2 个相同大小的 div。第一个 div 的 z-index=1 并且颜色为红色。第二个 div 的 z-index=0 并且颜色为黄色。我希望在将鼠标悬停在 div 上时，黄色框（最初位于下方）的 z-index 应在 2 秒后变为 2（以便它出现）。但我不明白为什么代码不起作用。

#animate1,
#animate2 {
  position: absolute;
  top: 0;
  left: 0;
  width: 50px;
  height: 50px;
}

#animate1 {
  background-color: red;
  z-index: 1;
}

#animate2 {
  background-color: yellow;
  z-index: 0;
  transition: z-index 0 linear 2s;
}

#all:hover #animate2 {
  z-index: 2;
}

<html>
  <head>
    <link rel="stylesheet" href="style.css">
  </head>
  <body>
    <div id="all">
      <div id="animate1">
      </div>
      <div id="animate2">
      </div>
    </div>
  </body>
</html>

【问题讨论】：

你所期望的没有做什么？查看codepen.io/chriscoyier/pen/gboJf

标签： html css

【解决方案1】：

您应该将#animate2 样式从transition: z-index 0 linear 2s; 更新为transition: z-index cubic-bezier(0.4, 0, 1, 1) 2s;。

【讨论】：

【解决方案2】：

你应该使用visibility:hidden；和opacity:0; 然后在悬停时将它们更改为visibility:visible; 和opacity:1 而不是更改z-index;

#animate1,
#animate2 {
  position: absolute;
  top: 0;
  left: 0;
  width: 50px;
  height: 50px;
}

#animate1 {
  background-color: red;
  z-index: 1;
}

#animate2 {
  background-color: yellow;
  visibility:hidden;
  opacity:0;
  z-index:2;
  transition: all linear 2s;
}

#all:hover #animate2 {
  visibility:visible;
  opacity:1;
}

<html>
  <head>
    <link rel="stylesheet" href="style.css">
  </head>
  <body>
    <div id="all">
      <div id="animate1">
      </div>
      <div id="animate2">
      </div>
    </div>
  </body>
</html>

【讨论】：

【解决方案3】：

删除“0”或将“0”放入transition: z-index 0 linear 2s;

#animate1,
#animate2 {
  position: absolute;
  top: 0;
  left: 0;
  width: 50px;
  height: 50px;
}

#animate1 {
  background-color: red;
  z-index: 1;
}

#animate2 {
  background-color: yellow;
  z-index: 0;
  transition: z-index linear 2s;
}

#all:hover #animate2 {
  z-index: 2;
}

<html>
  <head>
    <link rel="stylesheet" href="style.css">
  </head>
  <body>
    <div id="all">
      <div id="animate1">
      </div>
      <div id="animate2">
      </div>
    </div>
  </body>
</html>

【讨论】：

【解决方案4】：

您设置的transition-duration 不包含单位 - CSS 中的<time> 数据类型必须包含一个单位，否则它们将被视为无效并因此被忽略。在您包含的示例代码的实例中，由于您使用的是 transition 速记属性，因此实际上整个部分都被忽略了。

因此，要解决您的问题，您需要向 transition-duration 添加一个单元 - s 或 ms 将作为值是 0 - 或者，正如其他人所建议的那样，因为值是0，完全省略transition-duration。

【讨论】：