Css从显示无转换到显示块，使用subnav导航

Question

这就是我的jsFiddle link

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>

Answer 2

通常，当人们试图为display: none设置动画时，他们真正想要的是：

1. 淡入内容和
2. 隐藏
时，项目不会占用文档中的空间

最热门的答案使用visibility，这只能实现第一个目标，但幸运的是，使用position同样容易实现这两个目标。

由于position: absolute从键入文档流间距中删除了该元素，因此您可以在position: absolute和position: static（全局默认值）之间切换，并与opacity结合使用。请参阅以下示例。

＆＃13;
＆＃13;
.content-page {
  position:absolute;
  opacity: 0;
}

.content-page.active {
  position: static;
  opacity: 1;
  transition: opacity 1s linear;
}
＆＃13;
＆＃13;
＆＃13;

Answer 3

您可以使用动画关键帧而不是过渡来执行此操作。更改悬停声明并添加动画关键帧，您可能还需要为-moz-和-webkit-添加浏览器前缀。有关详细信息，请参阅https://developer.mozilla.org/en/docs/Web/CSS/@keyframes。

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;
    animation: fade 1s;
}

@keyframes fade {
    0% {
        opacity: 0;
    }

    100% {
        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>

这是你的小提琴的更新。 https://jsfiddle.net/orax9d9u/1/