CSS从无显示过渡到显示块，使用subnav导航

Question

这就是我的jsFiddle链接

nav.main ul ul {

    position: absolute;

    list-style: none;

    display: none;

    opacity: 0;

    visibility: hidden;

    padding: 10px;

    background-color: rgba(92, 91, 87, 0.9);

    -webkit-transition: opacity 600ms, visibility 600ms;

            transition: opacity 600ms, visibility 600ms;

}



nav.main ul li:hover ul {

    display: block;

    visibility: visible;

    opacity: 1;

}


<nav class="main">

    <ul>

        <li>

            <a href="">Lorem</a>

            <ul>

                <li><a href="">Ipsum</a></li>

                <li><a href="">Dolor</a></li>

                <li><a href="">Sit</a></li>

                <li><a href="">Amet</a></li>

            </ul>

        </li>

    </ul>

</nav>

为什么没有过渡？如果我设置

nav.main ul li:hover ul {
    display: block;
    visibility: visible;
    opacity: 0; /* changed this line */
}

然后，“ subnav”将永远不会出现（当然），但是为什么不触发不透明度转换呢？如何使过渡正常工作？

Answer 1

如您所知，display仅在CSS中将该属性设置为动画时，它会覆盖visibility和opacity过渡。

解决方案…只是删除了display属性。

nav.main ul ul {

  position: absolute;

  list-style: none;

  opacity: 0;

  visibility: hidden;

  padding: 10px;

  background-color: rgba(92, 91, 87, 0.9);

  -webkit-transition: opacity 600ms, visibility 600ms;

  transition: opacity 600ms, visibility 600ms;

}

nav.main ul li:hover ul {

  visibility: visible;

  opacity: 1;

}


<nav class="main">

  <ul>

    <li>

      <a href="">Lorem</a>

      <ul>

        <li><a href="">Ipsum</a>

        </li>

        <li><a href="">Dolor</a>

        </li>

        <li><a href="">Sit</a>

        </li>

        <li><a href="">Amet</a>

        </li>

      </ul>

    </li>

  </ul>

</nav>