Friday, August 2, 2019

Transitions on the CSS display property



I'm currently designing a CSS 'mega dropdown' menu - basically a regular CSS-only dropdown menu, but one that contains different types of content.



At the moment, it appears that CSS 3 transitions don't apply to the 'display' property, i.e., you can't do any sort of transition from display: none to display: block (or any combination).



Is there a way for the second-tier menu from the above example to 'fade in' when someone hovers over one of the top level menu items?



I'm aware that you can use transitions on the visibility: property, but I can't think of a way to use that effectively.



I've also tried using height, but that just failed miserably.



I'm also aware that it's trivial to achieve this using JavaScript, but I wanted to challenge myself to use just CSS, and I think I'm coming up a little short.


Answer



You can concatenate two transitions or more, and visibility is what comes handy this time.





div {
border: 1px solid #eee;
}
div > ul {
visibility: hidden;
opacity: 0;
transition: visibility 0s, opacity 0.5s linear;
}
div:hover > ul {
visibility: visible;
opacity: 1;
}



  • Item 1

  • Item 2

  • Item 3







(Don't forget the vendor prefixes to the transition property.)



More details are in this article.


No comments:

Post a Comment

plot explanation - Why did Peaches' mom hang on the tree? - Movies & TV

In the middle of the movie Ice Age: Continental Drift Peaches' mom asked Peaches to go to sleep. Then, she hung on the tree. This parti...