可见性的CSS过渡不起作用答案

【问题标题】：CSS transition with visibility not working可见性的CSS过渡不起作用
【发布时间】：2015-03-10 02:31:18
【问题描述】：

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

案例一：

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

案例 2：

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

【问题讨论】：

后者之所以有效，是因为opacity 可以在0 和1 之间取多个值，而visibility 只能是visible 或hidden（没有中间值）跨度>
我正在使用 width 和 height 这样做

标签： css css-transitions

【解决方案1】：

这不是错误-您只能在序数/可计算属性上进行转换（一种简单的思考方式是任何具有数字开始和结束数值的属性..尽管有少数例外）。

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

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

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

可转换（动画）属性列表可以在here找到

【讨论】：

dev.w3.org/csswg/css-transitions/#animtype-visibility 指定中间值映射到“可见”。
@BeniCherniavsky-Paskin - 这取决于计时功能：other values of the timing function (which occur only at the start/end of the transition or as a result of cubic-bezier() functions with Y values outside of [0, 1]) map to the closer endpoint
SW4 的回应具有误导性，并没有解释对可见性目的的误解。
@JesseMonroy650 - 虽然我会犹豫反驳，但如果没有提供任何补充证据来证明这一说法，这样做会更容易，如果你能详细说明会很有趣吗？ OP 并没有询问可见性的目的（与显示、不透明度不同），而是为什么它不能作为属性进行动画处理，即出于给定的原因 - 它实际上是一个开/关设置。答案不是要解决“什么是可见性”，而是“为什么不能动画化”
我们可以对 OP 的含义提出质疑，但我会反驳。对持续（不完整）的主题和无法完成这项工作感到恼火，我决定对其进行调查。首先值得注意的是documentation is poor；解释很差，spec is poorly written（编辑也有注释）。虽然记录为animatable，但实际上它只有很少的属性；这些属性之一是timing。我很快就会写博客。

【解决方案2】：

可见性是动画的。查看此博客文章：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>

【讨论】：

这不是真的。文章清楚地显示：1：用户将鼠标悬停在元素上 2：可见性切换为可见 3：不透明度过渡动画开始
然而，这篇文章确实实现了动画可见性的功能等效，通过巧妙地过渡到不透明度。它很好地解释了为什么您仍然需要调整可见性以便能够单击隐藏对象“下方”的内容，例如使用下拉菜单。但是，如果它在本地给出一个示例和摘要，这个答案会更好。（链接中断；我刚刚修复了一个。）
这个答案有点误导，但它仍然有效，谢谢！
@BobStein-VisiBone 我编辑了我的答案并举了一个例子。感谢您的帮助:)
-1 您可能已经添加了一个示例，但您仍在为opacity 制作动画。当我删除不透明度过渡时，它不工作。错误的答案。

【解决方案3】：

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

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

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

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

【讨论】：