CSS 드롭 다운 메뉴 페이딩 전환 및 표시

Question

나는 숙제를하고 있었고 display:none; 및 display:inline; 등을 사용하는 곳에 CSS 전환 효과를 사용할 수없는 것으로 보입니다.

내 CSS 드롭 다운 메뉴로 마우스를 가져 가면 페이드 인/페이드 아웃을 추가하여 깨끗하게 보일 수 있습니다. 내가 발견 한 것처럼 디스플레이 요소를 사용할 때는 불가능합니다.

내 CSS에서 display을 제거하려고 시도했지만이 작업을 수행 할 때 요소가 표시되고 (보이지 않아도 됨) 페이드 인 할 때 사라집니다. 나는 "포인터 이벤트 : 없음"을 추가하라는 제안을 읽었습니다. 이것에 크로스 브라우저 호환되지 않습니다. 또한 마우스를 다시 움직이면 페이딩 요소가 깜박입니다.

디스플레이 요소를 사용하면서 페이드 인하 기 위해 CSS 키 프레임 애니메이션 제안을 사용했지만 마우스를 떠날 때 페이드 아웃 할 수 없었습니다. .

http://pastebin.com/zVQapUNz

Answer 1

: :(

내가 많은 웹 사이트에 본 적이 있지만, 난 그냥 내 적합한 작업을 얻을 수 없기 때문에 이것이 가능 알고 여기

내 코드입니다 나는 jsfiddle.net

http://jsfiddle.net/3PD7D/1/

에 코드를 작성했습니다이 작업을 수행 할 때 내가 위로 마우스를 이동 t를 사용하면 같은 개념을 사용하여 불투명도를 변경할 수 있습니다.

메뉴를 숨기려면 다음을 수행하십시오. 그러나 이렇게하면 보이지는 않지만 클릭 할 수없는 것은 투명하게됩니다. 나는 당신이 디스플레이를 추가하면 일어날 일을 시도하지 않았다 : 끝 애니메이션 프레임에 없음.