CSS从无显示过渡到显示块，使用subnav导航[重复]

Posted 2023-03-05

【中文标题】CSS从无显示过渡到显示块，使用subnav导航[重复]

【英文标题】：Css transition from display none to display block, navigation with subnav [duplicate]

【发布时间】：2016-12-10 21:04:22

【问题描述】：

这就是我拥有的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”将永远不会出现（当然）但是为什么不透明度上的过渡没有触发？如何进行转换？

【问题讨论】：

如果您删除显示属性，淡出过渡对我有用：jsfiddle.net/LgvhLxya

@JamesWaddington 这就是我一直在说的。

你为什么不用 Jquery show and hide 来做呢？然后，您就可以制作动画了。

【参考方案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>

【讨论】：

是的，但是这样 ul 会占用 dom 中的空间。

应该没关系，因为您使用的是从正常文档流中删除元素的绝对定位。这是另一篇类似于您的帖子...***.com/questions/22103006/…。删除display:none 和visibility:hidden。

是的，但这会导致奇怪的可点击但不可见的链接。如果它们在同一个空间上，它可能会打断您的其他元素。

同时使用键盘导航也会被打乱，因为tab键会选择不可见的链接（因此对用户没有可见的影响——至少可以说令人困惑）。

【参考方案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/

【讨论】：

这很聪明。 display:none -->block 不能动画，但是添加 visibility:hidden --> visible 会触发它。酷利欧！

@Drenai：visibility: hidden 在哪里使用？

@DanDascalescu 我已经更新了答案以包含基本样式

这是唯一可行的答案！正如其他人所建议的那样，使用位置absolute 或static 是错误的！ jsfiddle.net/centurianii/nwvyf749

如果您使用此解决方案，请记住它仅适用于淡入。它不适用于淡出，因为 display:none 会立即应用。

【参考方案3】：

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

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

最流行的答案使用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;

【讨论】：

如果我在父元素上使用display: flex 来获得垂直居中的内容（淡出/淡入）怎么办？ position: absolute 然后打破它。

垂直居中还有其他方法，例如使用行高、视图高度或jquery/javascript。或者您可以在 flex 显示的父级中创建子级吗？

如果我可以创造孩子，你有什么建议？

Animating position 在 ios Safari 上不起作用：-/

谁说绝对定位元素不占空间？ jsfiddle.net/centurianii/nwvyf749