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

CSS中的visability:hidden和display:none之间存在差异。对于你想要的，我会做这样的事情，以减轻你的问题：

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/

可见性问题：隐藏;并在HTML中过渡

1 个答案: