将不透明度从 0 过渡到 .9 可以将可见性从隐藏切换为可见，但反之则不行

Question

当我将鼠标悬停在主菜单中的某个项目上时，会出现一个子菜单：

我有一个过渡效果，子菜单在 0.5 秒内从 0 不透明度过渡到 0.9 不透明度。但是，我还必须将可见性从隐藏切换为可见才能使其正常工作。

这是html：

<li style="position: relative;" onmouseover="showLegalMenu()" onmouseout="hideLegalMenu()">
            <a>Legal</a>
                                            <div id="legal-menu" class="legal">
                                                <ul>
                                                    @if (termsOfUse != null)
                                                    {
                                                        <li><a href="@termsOfUse.Url">@termsOfUse.Name</a></li>
                                                    }
                                                    @if (privacyAndSecurity != null)
                                                    {
                                                        <li><a href="@privacyAndSecurity.Url">@privacyAndSecurity.Name</a></li>
                                                    }
                                                    @if (refundPolicy != null)
                                                    {
                                                        <li><a href="@refundPolicy.Url">@refundPolicy.Name</a></li>
                                                    }
                                                </ul>
                                            </div>
                                        </li>

这是Javascript：

    function showLegalMenu() {
        $("#legal-menu").addClass("legal-show");
    }

    function hideLegalMenu() {
        $("#legal-menu").removeClass("legal-show");
    }

这是CSS：

    .legal {
        visibility: hidden;
        background-color: #383838;
        opacity: 0;
        padding: 5px 0;
        z-index: 10;
        position: absolute;
        top: 15px;
        left: 10px;
        width: 150px;
        transition: opacity .5s linear;
    }

    .legal-show {
        visibility: visible;
        opacity: .9;
    }

过渡效果很好。添加了 legal-show class，将其设置为可见，并从 0 不透明度过渡到 .9 不透明度。

正在过渡，这就是问题所在。 legal-show class 被删除，导致子菜单立即变得不可见（无转换）。子菜单项仍然以某种方式从 .9 不透明度过渡到 0 不透明度（即使 div 它们包含在此时据说是不可见的），但我想要子菜单 div也像这样过渡到 0 不透明度。

如果我可以在过渡结束时而不是立即将可见性设置为隐藏，我相信这会奏效。如何做到这一点？谢谢

Answer 1

无需使用 JavaScript 使其复杂化。这可以通过 CSS 轻松实现。

.legal {
  visibility: hidden;
  background-color: #383838;
  opacity: 0;
  padding: 5px 0;
  z-index: 10;
  position: absolute;
  top: 15px;
  left: 10px;
  width: 150px;
  transition: all 0.5s ease-in-out;
}

.parent-li:hover .legal {
  visibility: visible;
  opacity: .9;
}

<li class="parent-li">
  <a>Legal</a>
  <div id="legal-menu" class="legal">
    <ul>
      <li><a href="@termsOfUse.Url">@termsOfUse.Name</a></li>
      <li><a href="@privacyAndSecurity.Url">@privacyAndSecurity.Name</a></li>
      <li><a href="@refundPolicy.Url">@refundPolicy.Name</a></li>
    </ul>
  </div>
</li>

Answer 2

.to-toggle {
  max-height: 0;
  overflow: hidden;
  opacity: 0.9;
  background: red;
  transition: max-height .5s ease-out;
}

.to-toggle.active {
  height: auto;
  max-height: 500px;
  transition: max-height .5s ease-in;
}

<div class="legal">
  <label id="hoverable">Hover me</label>
  <div class="to-toggle">
    <ul>
      <li>show1</li>
      <li>show2</li>
      <li>show3</li>
    </ul>
  </div>
</div>

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script>
$(() => {
  $('#hoverable').hover(function() {
    $('.to-toggle').addClass('active')
    console.log('asdasd')
  }, function() {
    $('.to-toggle').css({'transition': 'opacity height 5s ease-out'}).removeClass('active')
  })
})
</script>

Answer 3

不仅要转换 不透明度，还要转换 可见性 :

transition: opacity .5s linear, visibility .5s;

visibility 是“0”或“1”状态（无中间值），因此它会在 0.5 秒后更改其值，为您的 留出时间opacity transition淡出生效

编辑 : 现在我不明白为什么它也适用于淡入。

.legal {
  visibility: hidden;
  background-color: #383838;
  opacity: 0;
  padding: 5px 0;
  z-index: 10;
  position: relative;
  top: 15px;
  left: 10px;
  width: 150px;
  transition: opacity .5s linear, visibility .5s;
}

.legal-show {
  visibility: visible;
  opacity: .9;
}

li.legal-container:hover #legal-menu,
#legal:hover {
  visibility: visible;
  opacity: .9;
}

<ul>
  <li style="position: relative;" class="legal-container">
    <a>Legal</a>
    <ul id="legal-menu" class="legal">

      <li><a href="@termsOfUse.Url">test3</a></li>

      <li><a href="@privacyAndSecurity.Url">test</a></li>

      <li><a href="@refundPolicy.Url">test2</a></li>

    </ul>
  </li>
</ul>

将不透明度从 0 过渡到 .9 可以将可见性从隐藏切换为可见，但反之则不行

Transitioning opacity from 0 to .9 works with toggling visibility from hidden to visible, but not the other way around

css

transition

visibility