title: Transitioning opacity from 0 to .9 works with toggling visibility from hidden to visible, but not the other way around
body: <p>I have a sub-menu that appears when I hover over an item in the main menu:</p>
  
  <p><a href="https://i.stack.imgur.com/bTDFG.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/bTDFG.png" alt="enter image description here"></a></p>
  
  <p>I have a transition effect whereby the sub-menu transitions from 0 opacity to .9 opacity in .5 seconds. However, I also have to toggle the visibility from hidden to visible in order for this to work.</p>
  
  <p>Here's the html:</p>
  
  <pre><code>&lt;li style="position: relative;" onmouseover="showLegalMenu()" onmouseout="hideLegalMenu()"&gt;
              &lt;a&gt;Legal&lt;/a&gt;
                                              &lt;div id="legal-menu" class="legal"&gt;
                                                  &lt;ul&gt;
                                                      @if (termsOfUse != null)
                                                      {
                                                          &lt;li&gt;&lt;a href="@termsOfUse.Url"&gt;@termsOfUse.Name&lt;/a&gt;&lt;/li&gt;
                                                      }
                                                      @if (privacyAndSecurity != null)
                                                      {
                                                          &lt;li&gt;&lt;a href="@privacyAndSecurity.Url"&gt;@privacyAndSecurity.Name&lt;/a&gt;&lt;/li&gt;
                                                      }
                                                      @if (refundPolicy != null)
                                                      {
                                                          &lt;li&gt;&lt;a href="@refundPolicy.Url"&gt;@refundPolicy.Name&lt;/a&gt;&lt;/li&gt;
                                                      }
                                                  &lt;/ul&gt;
                                              &lt;/div&gt;
                                          &lt;/li&gt;
  </code></pre>
  
  <p>Here's the Javascript:</p>
  
  <pre><code>    function showLegalMenu() {
          $("#legal-menu").addClass("legal-show");
      }
  
      function hideLegalMenu() {
          $("#legal-menu").removeClass("legal-show");
      }
  </code></pre>
  
  <p>Here's the CSS:</p>
  
  <pre><code>    .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;
      }
  </code></pre>
  
  <p>Transitioning in works fine. The legal-show class is added, it is set to visible, and it transitions from 0 opacity to .9 opacity.</p>
  
  <p>It's transitioning out that's the problem. The legal-show class is removed, causing the sub-menu to become invisible immediately (no transition). The sub-menu items still transition from .9 opacity to 0 opacity somehow (even though the div they are contained in is supposedly invisible at this time), but I would like for the sub-menu div to also transition to 0 opacity like this as well.</p>
  
  <p>If I could just set the visibility to hidden at the end of the transition rather than right away, I believe this would work. How does one does this? Thanks.</p>