可見性問題：隱藏;和過渡在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/