Gradient effect of CSS display properties

Question

I'm currently designing a CSS "super dropdown" - basically a regular pure CSS dropdown, but with different types of content in it.

Currently, it seems that CSS 3 transition effects do not apply to the "display" attribute, that is, there is no way to transition from display: none to < code>display: block (or any combination).

In the example above, is there a way to make the second level menu "fade in" when someone hovers over the top menu item?

I know you can use transition effects on the visibility: attribute, but I can't figure out a way to use it effectively.

I also tried using height, but the results were terrible.

I also know that this can be easily achieved using JavaScript, but I wanted to challenge myself to just use CSS, but I feel like I'm a little out of my depth.

Answer 1

You need to hide the element in other ways to make it work properly.

I achieved the effect by setting both <div> to absolute positioning, and the hidden one to opacity: 0.

If you switch the display attribute from none to block, the transition effect for other elements will not occur.

To solve this problem, always allow elements to be display: block, but hide the element by any of the following means:

1. Set height to 0.
2. Set opacity to 0.
3. Position an element outside the frame of another element with overflow: hidden.

There may be more solutions, but if you switch the element to display: none, the transition cannot be performed. For example, you might try something similar to:

div {
    display: none;
    transition: opacity 1s ease-out;
    opacity: 0;
}
div.active {
    opacity: 1;
    display: block;
}

But this will notwork. In my experience, I've found that this doesn't have any effect.

So you always need to keep the element's display: block - but you can get around this by:

div {
    transition: opacity 1s ease-out;
    opacity: 0;
    height: 0;
    overflow: hidden;
}
div.active {
    opacity: 1;
    height: auto;
}

Answer 2

You can connect two or more transition effects, and visibility comes in handy at this point.

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;
}

<div>
  <ul>
    <li>Item 1</li>
    <li>Item 2</li>
    <li>Item 3</li>
  </ul>
</div>