搜索

首页  >  问答  >  正文

CSS 显示属性上的转换

<p>我目前正在设计一个 CSS“大型下拉”菜单 - 基本上是一个常规的纯 CSS 下拉菜单,但包含不同类型的内容。</p> <p>目前,<strong>CSS 3 过渡似乎不适用于“display”属性</strong>,即您无法从 <code>display: none< 进行任何类型的过渡/code> 到 <code>display: block</code> (或任意组合)。</code></p><code> <p>当有人将鼠标悬停在顶级菜单项之一上时,是否有办法使上例中的第二层菜单“淡入”?</p> <p>我知道您可以在 <code>visibility:</code> 属性上使用转换,但我想不出有效使用它的方法。</p> <p>我也尝试过使用高度,但惨败。</p> <p>我也知道使用 JavaScript 实现这一点很简单,但我想挑战自己只使用 CSS,而且我认为我的能力有点不足。</p></code>
P粉958986070P粉958986070520 天前641

全部回复(2)我来回复

  • P粉701491897

    P粉7014918972023-08-24 10:06:54

    您需要通过其他方式隐藏该元素才能使其正常工作。

    我通过将两个

    绝对定位并将隐藏的设置为 opacity: 0 来实现这一效果。

    如果您将 display 属性从 none 切换为 block,其他元素上的转换将不会发生。

    要解决此问题,请始终允许元素为 display: block,但通过调整以下任一方式来隐藏元素:

    1. 高度设置为0
    2. 不透明度设置为0
    3. 将该元素放置在另一个具有 overflow:hidden 元素的框架之外。

    可能还有更多解决方案,但如果将元素切换为 display: none,则无法执行转换。例如,您可以尝试尝试这样的事情:

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

    但这行不通。根据我的经验,我发现这没有任何作用。

    因此,您始终需要保留元素 display: block - 但您可以通过执行以下操作来绕过它:

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

    回复
    0
  • P粉071743732

    P粉0717437322023-08-24 00:00:44

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

    回复
    0
  • 取消回复