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

您可以使用动画关键帧而不是过渡来做到这一点。更改悬停声明并添加动画关键帧，您可能还需要为 -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/

Answer 3

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

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

最流行的答案使用visibility，它只能实现第一个目标，但幸运的是，使用position 可以轻松实现这两个目标。

由于position: absolute 会从输入文档流间距中删除元素，因此您可以在position: absolute 和position: static（全局默认值）之间切换，并结合opacity。请参见下面的示例。

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

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