CSS3 전환 페이드 아웃 표시 속성

Question

나는 css3으로 전환을 페이드 아웃하려고했지만 디스플레이가 전환으로 작동하지 않는다는 것을 알았습니다.

은 내가 <h2> 제목과 <div class='group'>와 그룹 개체를 <div id=groupID>하고 난 그룹 클래스는 퀘스 트 로그에서 사라질 수 있도록해야 <h2>에 온 클릭 이벤트 바인딩이있다. 나는 그것의 모든 애니메이션을하지 않습니다

//collapse function 
block.setStyle({opacity: 0}); 
block.setStyle({height: 0}); 

//expand function 
block.setStyle({opacity: 1}); 
block.setStyle({height: 'auto'}); 

JS {display:none} 그러나

CSS

transition: all 2s ; 
-webkit-transition: height 2s ease-out; 
transition: opacity 2s ease-out ; 
display: block; 
-webkit-transition: opacity 2s ease-out; 

와 같은 효과를가집니다로이 작품을 잘 {opacity: 0; height: 0; overflow: hidden;}와 디스플레이 문제를 극복하기 위해 노력했습니다 닫히지 만 재 등장시 사라집니다. 즉시 사라집니다.

예 저는 CSS3에서 필요합니다. 아니오, jQuery를 사용할 수 없습니다.

어떤 아이디어가 있습니까?

감사

Answer 1

시도하고 transition to and from auto하지 마십시오. 그것은 작동하지 않습니다.

자바 스크립트로 요소의 높이를 픽셀로 계산하고 block.setStyle() 호출에서이를 사용할 수 있습니다.