可见性不能正常工作的CSS转换
在下面的小提琴中，我分别对可见度和不透明度进行了转换。 后者工作，但前者不。 而且，在能见度的情况下，转换时间被解释为hover延迟。 在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; }
这不是一个错误 – 你只能在序数/可计算属性上进行转换（一个简单的想法是任何一个具有数字开始和结束数字值的属性，虽然有一些例外）。
这是因为转换工作是通过计算两个值之间的关键帧，并通过外推中间量来生成animation。
在这种情况下， visibility是一个二进制设置（可见/隐藏），所以一旦过渡持续时间过去，属性就会简单地切换状态，您将其视为延迟 – 但实际上可以将其视为过渡animation的最终关键帧，中间关键帧没有被计算出来（什么构成了隐藏/可见？不透明？维度之间的值，因为它不明确，所以不计算）。
opacity是一个值设置（0-1），因此可以在所提供的持续时间内计算关键帧。
可转换（animation）属性的列表可以在这里find
可见性是可以animation的。 检查这篇博客文章： http : //www.greywyvern.com/? post =337
你也可以在这里看到： https ： //developer.mozilla.org/en-US/docs/Web/CSS/CSS_animated_properties
比方说，你有一个菜单，你想淡入和淡出鼠标hover。 如果仅使用opacity:0 ，则透明菜单将仍然存在，并且在hover不可见区域时它将生成animation。 但是，如果您添加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>
根据规范，可见度是一个可以animation的属性，但是人们可以预料，可见度的过渡并不会逐渐发挥作用。 相反，隐藏元素的可见性延迟转换。 另一方面，使元素可见立即工作。 这是由规范定义的 （在默认定时function的情况下）以及在浏览器中实现的。
这也是一个有用的行为，因为实际上可以想象各种视觉效果来隐藏元素。 淡出元素只是一种使用不透明指定的视觉效果。 其他视觉效果可能会使用例如transform属性移开元素，另请参阅http://taccgl.org/blog/css-transition-visibility.html
将不透明度转换与可视性转换组合在一起通常很有用！ 尽pipe不透明看起来是正确的，但完全透明的元素（不透明度：0）仍然会接收鼠标事件。 因此，例如单独使用不透明度过渡淡出的元素上的链接，仍旧响应点击（虽然不可见），淡化元素后面的链接不起作用（尽pipe通过淡化元素可见）。 请参阅http://taccgl.org/blog/css-transition-opacity-for-fade-effects.html 。
这种奇怪的行为可以通过只使用两个转换，可见性转换和不透明转换来避免。 因此，可见性属性用于禁用元素的鼠标事件，而不透明度用于视觉效果。 但是，当视觉效果正在播放时，必须小心不要隐藏元素，否则将看不见。 在这里，可见性转换的特殊语义变得方便。 隐藏元素时，元素在播放视觉效果时保持可见，并在之后隐藏。 另一方面，当显示一个元素时，可见性转换使元素立即可见，即在播放视觉效果之前。
