显示的CSS转换延迟不起作用[重复]答案

【问题标题】：css transition delay for display not working [duplicate]显示的CSS转换延迟不起作用[重复]
【发布时间】：2019-03-04 15:51:19
【问题描述】：

我在这里创建了一个简单的示例： https://codepen.io/marekKnows_com/pen/LaRPZv

我想做的是在鼠标悬停在蓝色框上 2 秒后显示红色框。当鼠标离开蓝框时，我希望红框立即消失。

HTML 代码如下所示：

<div id="blueBox">
</div>
<div id="redBox" class="">
</div>

CSS 代码：

#blueBox {
  background-color: blue;
  width: 200px;
  height: 50px;
}
#redBox {
  display: none;
  background-color: red;
  width: 200px;
  height: 50px;
  transition: display 0s step-end 2s;
}
#redBox.isVisible {
  transition: display 0s step-end 0s;
  display: block;
}

和JS代码：

const el = document.getElementById( 'blueBox' );
const redEl = document.getElementById( 'redBox' );

el.addEventListener( 'mouseover', () => {
  redBox.classList.add( 'isVisible' );
});

el.addEventListener( 'mouseout', () => {
  redBox.classList.remove( 'isVisible' );
});

我看到的是红框在出现红框之前没有等待 2 秒。为什么？

【问题讨论】：

The "display" property cannot be animated.
display 不是 CSS 中的动画属性。您可能需要考虑使用opacity。

标签： javascript html css delay transition

【解决方案1】：

为此使用可见性属性，因为您无法使用显示属性进行转换。

【讨论】：

谢谢大家！我改用不透明度，现在我可以按预期工作了。
你也不能单独使用visibility。
@AnuragSrivastava 我们可以通过可见性做到这一点。用下面的 css 试试上面的例子。（注意：您必须从#redBox.isVisible 中删除transition 属性，因为这里不需要它。只需要在#redBox 中设置）：#blueBox { background-color: blue; width: 200px; height: 50px; } #redBox { visibility: hidden; background-color: red; width: 200px; height: 50px; transition: visibility 0s step-end 2s; } #redBox.isVisible { visibility: visible; }
我想我的意思是平滑的视觉过渡而不是显示/隐藏。