CSS3 - DOM 제거시 전환

Question

keyframes을 사용하면 요소를 DOM에 삽입하자마자 애니메이션을 적용 할 수 있습니다.

@-moz-keyframes fadeIn { 
    from {opacity:0;} 
    to {opacity:1;} 
} 

@-webkit-keyframes fadeIn { 
    from {opacity:0;} 
    to {opacity:1;} 
} 

@keyframes fadeIn { 
    from {opacity:0;} 
    to {opacity:1;} 
} 

#box { 
    -webkit-animation: fadeIn 500ms; 
    -moz-animation: fadeIn 500ms; 
    animation: fadeIn 500ms; 
} 

일부 유사한 기능은이 DOM에서 제거 직전 요소에 (CSS, 아니 자바 스크립트를 통해) 애니메이션을 적용 할 수 있나요 : 여기에 몇 가지 샘플 CSS이야? 아래는이 아이디어로 놀기 위해 만든 jsFiddle입니다. 해결책을 안다면 자유롭게 그것을 포크로 만들어라.

jsFiddle - http://jsfiddle.net/skoshy/dLdFZ/

Answer 1

이 fadeOut라는 또 다른 CSS 애니메이션을 만들기 말한다. 그런 다음 요소를 제거 할 때, 그 새로운 애니메이션 요소에 animation 속성을 변경하고 애니메이션이 완료되면 요소의 실제 제거를 트리거 할 animationend 이벤트를 사용 :

$('.hide').click(function() { 
    if (!$(this).hasClass('disabled')) { 
     $('#fill').css('-webkit-animation', 'fadeOut 500ms'); 
     $('#fill').bind('webkitAnimationEnd',function(){ 
      $('#fill').remove(); 
      $('.show, .hide').toggleClass('disabled'); 
     }); 
    } 
}); 

See also my updated version of your jsFiddle. 작동하는지 적어도 나를 위해 사파리에서.

글쎄, 당신은 그 대신 .css() 클래스를 사용해야합니다.

jQuery는 아직 CSS 애니메이션을 "진짜"지원하지 않는다고 생각합니다. 따라서 당신은 그걸 없앨 수 있다고 생각하지 않습니다. webkitAnimationEnd. Firefox에서는 단지 animationend이라고합니다.

저는 CSS에서 이것을 할 방법이 없다고 확신합니다.

Answer 2

저는 자바 스크립트 용 구성 요소 라이브러리에서 작업 해 왔으며이 문제가 직접 발생했습니다. 나는 문제의 톤 자바 스크립트를 던질 수있는 혜택을 가지고 있지만, 당신은 이미 조금 사용하고 있기 때문에, 우아하게 저하 솔루션을 위해 다음을 고려하십시오 :

어떤 구성 요소/DOM 노드 제거시, '제거'라는 클래스.

는 그 다음 CSS에서 해당 클래스를 사용하여 애니메이션을 정의 할 수 있습니다 : 당신은 '제거'클래스를 추가 직후, 다시 자바 스크립트

.someElement.removing { 
    -webkit-animation: fadeOut 500ms; 
    -moz-animation: fadeOut 500ms; 
    animation: fadeOut 500ms; 
} 

그리고를, 당신은 '애니메이션을 확인 할 수 있어야한다 'css 속성을 추가하고, 존재하는 경우'animationEnd '에 연결할 수 있다는 것을 알고 있습니다. 그렇지 않으면 바로 요소를 제거하십시오. 나는 이것을 잠시 테스트했음을 기억한다. 예제 코드를 파헤쳐 볼 수 있는지 보겠습니다.

업데이트 :이 기술을 발굴하고 분리되는 DOM 요소에 대한 CSS3 애니메이션을 사용할 수 있도록 jQuery를위한 정말 멋진 플러그인을 쓰기 시작했습니다 . 자바가 추가로 필요하지 않습니다. http://www.github.com/arthur5005/jquery.motionnotion

매우 실험적이며 위험 부담은 있지만 도움과 의견을 많이 듣습니다. :) fadeIN 및 페이드 아웃이되지 CSS 애니메이션 CSS 전환을 사용해야 같은 이상적

Answer 3

..