CSS显示属性上的过渡

问题描述：

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

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

目前，似乎CSS3过渡不适用于"display"属性，即，您无法进行从display: none到(或任何组合).

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?

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

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.

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

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.

答

您可以连接两个或更多个转换，而visibility这一次很方便.

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

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

(不要忘记transition属性的供应商前缀.)

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

更多详细信息，请参见本文.

相关推荐