Css转换从显示没有显示块，导航与子导航。

This is what I have jsFiddle link

这就是我拥有的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>

Why is there no transition? If I set

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

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

Then the "subnav" will never appear (of course ) but why does the transition on the opacity not trigger? How to get the transition working?

然后，“子导航”将永远不会出现(当然)，但是为什么不透明度的过渡不会触发呢?如何让过渡工作?

3 个解决方案

#1

As you know the display property cannot be animated BUT just by having it in your CSS it overrides the visibility and opacity transitions.

正如您所知道的，display属性不能被动画化，但是仅仅通过在CSS中显示它就可以覆盖可见性和不透明度转换。

The solution...just removed the display properties.

解决方案…刚刚删除了显示属性。

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>

#2

Generally when people are trying to animate display: none what they really want is:

一般来说，当人们试图进行展示时:他们真正想要的是:

Fade content in, and
褪色的内容
Have the item not take up space in the document when hidden
该项目是否在隐藏时没有占用文档中的空间

Most popular answers use visibility, which can only achieve the first goal, but luckily it's just as easy to achieve both by using position.

大多数常见的答案都使用可见性，这只能实现第一个目标，但幸运的是，使用位置同样容易实现这两个目标。

Since position: absolute removes the element from typing document flow spacing, you can toggle between position: absolute and position: static (global default), combined with opacity. See the below example.

由于position: absolute将元素从输入文档流间距中移除，因此您可以在position: absolute和position: static(全局默认)之间切换，并结合不透明度。看下面的例子。

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

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

#3

You can do this with animation-keyframe rather than transition. Change your hover declaration and add the animation keyframe, you might also need to add browser prefixes for -moz- and -webkit-. See https://developer.mozilla.org/en/docs/Web/CSS/@keyframes for more detailed info.

您可以使用动画-关键帧而不是转换来实现。更改您的悬浮声明并添加动画关键帧，您可能还需要为-moz-和-webkit添加浏览器前缀。详细信息请参见https://developer.mozilla.org/en/docs/Web/CSS/@keyframes。

nav.main ul li:hover ul {
    display: block;
    visibility: visible;
    opacity: 1;
    animation: fade 1s;
}

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

    100% {
        opacity: 1;
    }
}

Here is an update on your fiddle. https://jsfiddle.net/orax9d9u/1/

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

#1