可见性问题：隐藏;和过渡在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; 
} 

在铬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保留元素周围的空间，并仍然af对版面的其余部分产生影响，而display:none不会影响版面的其余部分，并且工作起来就好像元素完全从页面中移除一样。所以，Chrome可能会出现一个怪癖，在它被隐藏之前首先显示visability:hidden元素。

的jsfiddle例如：http://jsfiddle.net/JKA8z/