CSS显示属性上的过渡

小编典典

CSS显示属性上的过渡

css

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

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

当有人将鼠标悬停在顶层菜单项之一上时，是否可以通过上述示例使第二层菜单“淡入”？

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

我也尝试过使用高度，但是那不幸地失败了。

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

阅读 691

2020-05-16

共1个答案

小编典典

您可以连接两个或多个过渡，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>

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

2020-05-16