Menu
This is what I have jsFiddle link
nav.main ul ul { position: absolute; list-style: none; display: none; opacity: 0; visibility: hidden; padding: 10px; background-color: rgba(92, 91, 87, 0.9); -webkit-transition: opacity 600ms, visibility 600ms; transition: opacity 600ms, visibility 600ms; } nav.main ul li:hover ul { display: block; visibility: visible; opacity: 1; }<nav class="main"> <ul> <li> <a href="">Lorem</a> <ul> <li><a href="">Ipsum</a></li> <li><a href="">Dolor</a></li> <li><a href="">Sit</a></li> <li><a href="">Amet</a></li> </ul> </li> </ul> </nav>Why is there no transition? If I set
nav.main ul li:hover ul { display: block; visibility: visible; opacity: 0; /* changed this line */ } Then the "subnav" will never appear (of course ) but why does the transition on the opacity not trigger? How to get the transition working?
710
When we want to use transition for display:none to display:block, transition properties do not work. The reason for this is, display:none property is used for removing block and display:block property is used for displaying block. A block cannot be partly displayed.
display is not one of the properties that transition works upon. See Animatable CSS properties for the list of CSS properties that can have transitions applied to them.
Transitioning two or more propertiesYou can transition two (or more) CSS properties by separating them with a comma in your transition or transition-property property. You can do the same with duration, timing-functions and delays as well. If the values are the same, you only need to specify one of them.
CSS can't natively animate transitions that use display: none . You can hack around this limitation by using a mix of visibility: hidden and height: 0 to make it "close enough." While these solutions are probably fine in most cases, it isn't quite the same as using display: none .
As you know the display property cannot be animated BUT just by having it in your CSS it overrides the visibility and opacity transitions.
The solution...just removed the display properties.
nav.main ul ul { position: absolute; list-style: none; opacity: 0; visibility: hidden; padding: 10px; background-color: rgba(92, 91, 87, 0.9); -webkit-transition: opacity 600ms, visibility 600ms; transition: opacity 600ms, visibility 600ms; } nav.main ul li:hover ul { visibility: visible; opacity: 1; }<nav class="main"> <ul> <li> <a href="">Lorem</a> <ul> <li><a href="">Ipsum</a> </li> <li><a href="">Dolor</a> </li> <li><a href="">Sit</a> </li> <li><a href="">Amet</a> </li> </ul> </li> </ul> </nav>If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
