가시성 문제 : 숨김; 및 전환 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/