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>

Answer 2

通常当人们试图动画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;
}

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/