페이드 인 및 나타나고 페이드 아웃되고 CSS 만 사용하여 사라지나요?

Question

버튼을 클릭 할 때 페이드 인/아웃하는 메뉴를 만들려고하고 있는데 CSS 전환을 사용하여 애니메이션을 처리하려고합니다. 여기

내가 메뉴가 페이드 않습니다 나타날 경우에만 절반 방식으로 작동 물론

#menu{ 
    background: red; 
    display: block;  
    overflow: hidden; 
    position: absolute; 
    width: 182px; 
    top: 1em; 
    padding: 0; 
    height: auto; 
    opacity: 0; 
    /* The menu must not be clickable/cover the UI once hidden */ 
    left: -100000px; 

    /* 
    The left property must change after the 
    opacity is zero and before it starts to 
    increase 
    */ 
    transition: opacity 0.25s 0.1s, left 0s; /* ??? */ 
    -webkit-transition: opacity 0.25s 0.1, left 0s; /* Safari */ 
} 

#menu.open{ 
    opacity: 1; 
    left: auto; 
} 

http://jsfiddle.net/AzKAk/5/

을 달성하기 원하는 샘플입니다,하지만이있을 때 페이드 아웃 , 엘리먼트가 적절한 위치에 놓이게되면 반드시 일어난다.

CSS3 만 사용하면 되나요?

Answer 1

의도하지 않은 채로 메뉴를 표시하거나 사라지도록하는 것으로 가정합니다.

실제로는 두 가지 속성 (opacity 및 display)의 조합을 사용해야합니다.

불투명도가 변경되면 메뉴가 사라지지만 opacity:0에 도달하면 보이지 않지만 여전히 존재하며 사용자 상호 작용을 수신합니다.

그래서 불투명도 변환이 완료된 후에 display을 none으로 변경해야합니다.

transitionend 이벤트 (Chome/Safari의 webkitTransitionEnd)를 사용하면이 작업을 수행 할 수 있습니다.

같은 것을 보일 것이다 귀하의 코드 : http://jsfiddle.net/daniran/GfbVV/

내가 예에서 jQuery를 사용하고 있습니다,하지만 당신은 그냥 간단하게 직접 ontransitionend 속성을 사용하여 리스너를 등록 할 수 있습니다;