css - CSS显示属性上的过渡(Transitions on the CSS display property)

Question

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

(我目前正在设计CSS“巨型下拉菜单”-基本上是一个常规的仅CSS下拉菜单，但其中包含不同类型的内容。)

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

(目前， 似乎CSS 3过渡不适用于'display'属性 ，即，您不能执行从display: none到display: block （或任何组合）的任何过渡。)

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.

(我知道您可以在visibility:属性上使用过渡，但是我想不出一种有效使用它的方法。)

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.

(我还知道使用JavaScript实现此功能很简单，但是我想挑战一下自己仅使用CSS，而且我想说的还有点不足。)

  ask by RichardTape translate from so

Answer 1

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

(您可以连接两个或更多个转换，这时visibility很方便。)

 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> 

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

(（不要忘记transition属性的供应商前缀。）)

More details are in this article .

(更多的细节在这篇文章 。)