如何将显示 CSS 转换延迟应用于 child div

Question

我希望将 css 转换延迟应用于 child div，例如：

<div id="outer">
  <div id="inner">Inner DIV</div>
</div>

#outer:hover #inner{display:none;transition-delay:1s;}

这能做到吗？如果是这样，有什么神奇之处？

jsFiddle Demo (to fiddle with)

#inner{width:50px;height:50px;background:green;transition:0s display;}

#outer{width:200px;height:200px;background:orangered;}
#outer{display:flex;justify-content:center;align-items:center;}

#outer:hover #inner{display:none;transition-delay:1s;}

<div id="outer">
  <div id="inner">Inner DIV</div>
</div>

Answer 1

解决方案：

正如 iArcadia 指出的那样，显示无法转换 - 因此大多数人都为 visibility/opacity 设置动画。

但是，使用 visibility/opacity 可能不是一个选项，因为 div-to-be-hidden 仍然存在。在我的例子中，这阻止了点击底层元素。

解决方案：将 width/height 设置为零可以有效地隐藏元素 - 并且这两个元素都是可转换的。

$('#outer').click(function(){
 $('#outer').toggleClass('cyan');
});
$('#inner').click(function(e){
 e.stopPropagation();
 return false;
});

#outer{width:200px;height:200px;background:orangered;}
#outer{display:flex;justify-content:center;align-items:center;}

#inner{width:50px;height:50px;background:green;transition:width 0s;overflow:hidden;}

#outer:hover #inner{width:0px;transition:width 0s linear 3s;}

.cyan{background:cyan !important;}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.2.4/jquery.min.js"></script>

<p>DEMO: Click on the red outer box to toggle BG color. Clicking on inner div won't toggle the color UNTIL the inner div is hidden (after 3s).</p>

<div id="outer">
  <div id="inner">Inner DIV</div>
</div>

Answer 2

我们不能在“display”上应用转换，使用“visibility”而不是 'display'

谢谢

如何将显示 CSS 转换延迟应用于 child div

How to apply a display CSS transition delay to a child div

css

css-transitions