如何将显示CSS过渡延迟应用于儿童div

Question

我希望将CSS过渡延迟应用于儿童div，例如：

<div id="outer">
  <div id="inner">Inner DIV</div>
</div>
#outer:hover #inner{display:none;transition-delay:1s;}

可以做到吗？如果是这样，什么是魔术？

jsfiddle demo （要使用）

#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指出的那样，显示器无法过渡 - 因此，大多数人都可以使可见性/不透明度动画。

但是，使用可见性/不透明度可能不是一个选择，因为仍然存在divdiv。就我而言，这阻止了单击基础元素。

解决方案：将宽度/高度设置为零有效地隐藏了元素 - 这两个都是可以过渡的。

$('#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 '，二手'可见度'而不是'display'

上应用过渡

谢谢