html - 可见性问题：隐藏；和 HTML 中的过渡

Question

HTML：

<link rel="stylesheet" type="text/css" href="s.css"/>
<div id="xd"><ul>a</ul></div>

CSS：

#xd ul {
    visibility: hidden;
    transition: all 1s;
}

在 Chrome 27 下，“a”出现 1 秒钟然后消失。可见性怎么会发生这种情况：隐藏；?

请解释为什么会发生这种情况。

谢谢你。

Answer 1

visability:hiddenCSS和display:noneCSS之间是有区别的。对于你想要的，我会做这样的事情来减轻你的问题：

CSS：

  #xd ul {
        display: none;
        transition: all 1s ease-in-out;
    }  

HTML：

  <ul id="xd"><ul><li>a</li></ul></ul>

有关两者之间差异的解释，这里是一个包含更多信息的链接：http: //www.w3schools.com/css/css_display_visibility.asp

本质上，套用上面的链接，visability:hidden保留元素周围的空间并且仍然会影响布局的其余部分，而display:none不会影响布局的其余部分并且就像元素从页面中完全删除一样工作。因此，Chrome 中可能有一个怪癖，它会在visability:hidden元素被隐藏之前先显示元素。

JSFiddle 示例：http: //jsfiddle.net/JKA8z/