0

I wish to apply a css transition delay to a child div, for example:

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

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

Can this be done? If so, what's the magic?

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>
cssyphus
  • 37,875
  • 18
  • 96
  • 111

2 Answers2

0

SOLUTION:

As iArcadia points out, display cannot be transitioned - so most people animate the visibility/opacity.

HOWEVER, using visibility/opacity might not be an option, because the div-to-be-hidden still exists. In my case, this prevented clicking on the underlying element.

Solution: setting width/height to zero effectively hides the element - and both of those are transitionable.

$('#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>
cssyphus
  • 37,875
  • 18
  • 96
  • 111
0

we can not apply the transitions on 'display', used 'visibility' instead of 'display'

thanks

Hamza rz
  • 1
  • 1