具有可见性的 CSS 过渡不起作用

Question

在下面的小提琴中，我分别对可见性和不透明度进行了过渡。后者有效，但前者无效。此外，在可见的情况下，过渡时间被解释为悬停时的延迟。在Chrome和Firefox中都发生。这是一个错误吗？

http://jsfiddle.net/0r218mdo/3/

案例1：

#inner{
    visibility:hidden;
    transition:visibility 1000ms;
}
#outer:hover #inner{
    visibility:visible;
}

案例2：

#inner1{
    opacity:0;
    transition:opacity 1000ms;
}
#outer1:hover #inner1{
    opacity:1;
}

Answer 1

这不是

一个错误 - 您只能在序数/可计算属性上进行转换（一个简单的思维方法是任何具有数字开始和结束数字值的属性。虽然有一些例外）。

这是因为过渡的工作原理是计算两个值之间的关键帧，并通过外推中间量来生成动画。

在这种情况下visibility是一个二进制设置（可见/隐藏），因此一旦过渡持续时间过去，该属性就会简单地切换状态，您将其视为延迟 - 但它实际上可以被视为过渡动画的最后一个关键帧，中间关键帧尚未计算（隐藏/可见之间的值构成什么？不透明度？尺寸？由于不明确，因此不会计算它们）。

opacity是一个值设置 （0-1），因此可以在提供的持续时间内计算关键帧。

可

转换（可动画）属性的列表可在此处找到

Answer 2

可见性在

传统上并不像您期望的那样具有动画效果。但是，您可以使用 opacity 属性伪造它。查看这篇关于它的博客文章：http://www.greywyvern.com/?post=337

你也可以在这里看到它：https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_animated_properties

假设您有一个要在鼠标悬停时淡入和淡出的菜单。如果您仅使用opacity:0，您的透明菜单仍将存在，当您将鼠标悬停在不可见区域时，它将动画显示。但是如果你加上visibility:hidden，你可以消除这个问题：

div {
    width:100px;
    height:20px;
}
.menu {
    visibility:hidden;
    opacity:0;
    transition:visibility 0.3s linear,opacity 0.3s linear;
    
    background:#eee;
    width:100px;
    margin:0;
    padding:5px;
    list-style:none;
}
div:hover > .menu {
    visibility:visible;
    opacity:1;
}

<div>
  <a href="#">Open Menu</a>
  <ul class="menu">
    <li><a href="#">Item</a></li>
    <li><a href="#">Item</a></li>
    <li><a href="#">Item</a></li>
  </ul>
</div>

Answer 3

根据规范，可见性是一个可动画的属性，但可见性上的过渡不会像人们预期的那样逐渐起作用。而是在可见性延迟时隐藏元素。另一方面，使元素可见会立即起作用。这是由规范定义的（在默认计时函数的情况下），并且在浏览器中实现。

这也是一种有用的行为，因为实际上人们可以想象各种视觉效果来隐藏元素。淡出元素只是使用不透明度指定的一种视觉效果。其他视觉效果可能会使用例如 transform 属性移开元素，另请参阅 http://taccgl.org/blog/css-transition-visibility.html

将不透明度过渡与可见性过渡相结合通常很有用！尽管不透明度似乎执行了正确的操作，但完全透明的元素（不透明度：0）仍会收到鼠标事件。因此，例如，仅通过不透明度过渡淡出的元素上的链接仍然响应点击（尽管不可见），并且淡入淡出元素后面的链接不起作用（尽管通过淡出元素可见）。请参阅 http://taccgl.org/blog/css-transition-opacity-for-fade-effects.html。

这种奇怪的行为可以通过同时使用两种过渡来避免，即可见性上的过渡和不透明度上的过渡。因此，可见性属性用于禁用元素的鼠标事件，而不透明度用于视觉效果。但是，必须注意不要在播放视觉效果时隐藏元素，否则这些效果将不可见。在这里，可见性转换的特殊语义变得很方便。隐藏元素时，元素在播放视觉效果时保持可见，之后隐藏。另一方面，当显示元素时，可见性过渡使元素立即可见，即在播放视觉效果之前。

Answer 4

如果你想延迟可见性，那么下面的代码片段可能是一个解决方案.
由于"可见性"属性处于打开/关闭状态，因此您可以使用 transition-delay 属性来控制对象应可见的时间。

div {
    width:100px;
    height:20px;
}
.menu {
    transition-delay: 0s;
    transition-duration: 0s;
    transition-property: opacity;
    background:#eee;
    width:100px;
    margin:0;
    height: 0px;
    opacity: 0;
    list-style:none;
    overflow: hidden;
}
div:hover > .menu {
    height: initial;
    transition-delay: 1s;
    opacity: 1;
}

<div>
  <a href="#">Open Menu</a>
  <ul class="menu">
    <li><a href="#">Item</a></li>
    <li><a href="#">Item</a></li>
    <li><a href="#">Item</a></li>
  </ul>
</div>

Answer 5

您需要

将 delay 属性添加到 transition 中，然后使用 opacity 。

我正在使用chakraUI和React，但它与纯CSS的逻辑相同，因为所有内容都被编译为纯CSS：

<Box
      display="flex"
      gap="2"
      flexWrap="wrap"
      visibility={shouldBeVisible ? 'visible' : 'hidden'}
      opacity={shouldBeVisible ? '1' : '0'}
      transition={
         shouldBeVisible
            ? 'opacity .3s linear'
            : 'visibility 0s linear .4s, opacity .3s ease-in-out'
        }
>
    {YOUR COMPONENTS}
<Box>

请注意，我使用 visibility 0s linear .4s, opacity .3s ease-in-out ，.4s是延迟隐藏的可见性，并且在等待隐藏时，实际的目标转换正在opacity属性上运行。