Transitions on the display: property
I'm currently designing a kind of CSS 'mega dropdown' menu - basically a normal CSS-only dropdown menu, but one that contains different types of content.
My question is more of a 'can you think of a way around this problem' sort of thing.
At the moment, it appears that CSS3 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).
Can anyone think of 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 utilise 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.
All and any suggestions most welcome.
CSS
- asked 9 years ago
- B Butts
2Answer
You can concatenate two transitions or more, and visibility is what comes handy this time.
div > ul {
visibility: hidden;
opacity: 0;
transition: visibility 0s, opacity 0.5s linear;
}
div:hover > ul {
visibility: visible;
opacity: 1;
}
(Don't forget the vendor prefixes to the transition property!)
More details are in this article
- answered 8 years ago
- Sunny Solu
You need to hide the element by other means in order to get this to work. I had the same issue on thispage.
I accomplished the effect by positioning both <div>s absolutely and setting the hidden one to opacity: 0.
If you even toggle the display property from none to block, Your transition on other elements will not occur.
To work around this, always allow the element to be display: block, but hide the element by adjusting any of these means:
- Set the
heightto0. - Set the
opacityto0. - Position the element outside of the frame of another element that has
overflow: hidden.
There are likely more solutions, but you cannot perform a transition if you toggle the element to display: none. For example, you may attempt to try something like this:
div {
display: none;
transition: opacity 1s ease-out;
opacity: 0;
}
div.active {
opacity: 1;
display: block;
}
But that will not work. From my experience, I have found this to do nothing :-(
Because of this, you will always need to keep the element display: block - but you could get around it by doing something like this:
div {
transition: opacity 1s ease-out;
opacity: 0;
height: 0;
overflow: hidden;
}
div.active {
opacity: 1;
height: auto;
}
- answered 8 years ago
- G John
Best Rated Questions
Your Answer