I want the display:block to fade in
HTML:
<div>Fade</div>
CSS:
div{display:none;transition:2s;}
div:hover{display:block;}
Somehow it doesnt work , is there any other way to achieve this effect?
Asked
Active
Viewed 59 times
1 Answers
1
You cannot transition the display property. Instead you should transition the opacity property.
The underlying reason for this has to do with the browsers rendering pipeline. It needs to properly layout the page before transitioning and an element with 1display: none;` has no layout (thus cannot be transitioned).
Dane O'Connor
- 75,180
- 37
- 119
- 173
-
And if you want to also toggle the `display` property, you'll need JavaScript. – Josiah Keller Sep 19 '15 at 04:09
-
@JosiahKeller can i use javascript to add transition to display? – m0bi5 Sep 19 '15 at 04:10
-
1Please search for duplicates before posting an answer. There are plenty of answers on the duplicate, including one that mentions opacity. Thanks! – Maximillian Laumeister Sep 19 '15 at 04:10
-
@MohitBhasi No, what you can do is use JavaScript to set display and then set a class so that opacity transitions. – Josiah Keller Sep 19 '15 at 04:12
-
@MohitBhasi @JosiahKeller Actually using pure css with the `:hover` pseudo selector works just fine. – Dane O'Connor Sep 19 '15 at 04:13
-
@MaximillianLaumeister Truth. – Dane O'Connor Sep 19 '15 at 04:17
-
@thedeeno technically it still takes up space in the dom though so opacity achieves the same effect but may not be the intended ux. if we reaaaalllly wanted to be picky – Daemedeor Sep 19 '15 at 04:32
-
@Daemedeor when the element is set to `display:none` it doesn't take up space. When it's `display:block; opacity:0;` it does. If I'm not mistaken. – Dane O'Connor Sep 19 '15 at 04:38
-
@thedeeno yes, that's my point about you suggesting opacity alone so he can't just use "pure" css because he'll have to set the display none after the opacity transitions to 0 – Daemedeor Sep 19 '15 at 05:14