Transformations on CSS display properties

Question

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

Currently, CSS 3 transitions do not appear to work with the 'display' property, i.e. you cannot make any kind of transition/code> from display: none< to < code>display: block (or any combination).

Is there a way to make the second-level menu in the example above "fade in" when someone hovers over one of the top-level menu items?

I know you can use a transform on the visibility: attribute, but I can't think of a way to use it efficiently.

I also tried using height, but failed miserably.

I also know it's easy to do this using JavaScript, but I want to challenge myself to just use CSS, and I think my abilities are a bit lacking.

Answer 1

You need to hide the element in some other way for this to work properly.

I achieved this effect by positioning both

absolutely and setting the hidden one to opacity: 0.

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

To resolve this issue, always allow the element to be display: block, but hide the element by adjusting any of the following:

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

There may be more solutions, but if you switch the element to display: none, the conversion cannot be performed. For example, you could try something like this:

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

But this doesn't work. In my experience, I've found that this doesn't do anything.

So you always need to preserve the element display: block - but you can get around it by doing:

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 transitions, and visibility will come in 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;
}

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