Question

我希望对子div应用CSS过渡延迟，例如：

<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所指出的，显示无法过渡-因此大多数人会设置可见性/不透明性的动画。

但是，使用可见性/不透明性可能不是一种选择，因为要隐藏的div仍然存在。就我而言，这可以防止单击基础元素。

解决方案：将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

我们无法在“ 显示”上应用过渡，而是使用“ 可见性”而非“显示”

谢谢

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

2 个答案: