[JQUERY] 때 CSS3 전환 완료 콜백

때 CSS3 전환 완료 콜백

해결법

1. ---

   1.전환을 위해 당신은 jQuery를 통해 전환의 끝을 감지하기 위해 다음을 사용할 수 있습니다 :

   전환을 위해 당신은 jQuery를 통해 전환의 끝을 감지하기 위해 다음을 사용할 수 있습니다 :

   $("#someSelector").bind("transitionend webkitTransitionEnd oTransitionEnd MSTransitionEnd", function(){ ... });
   

   모질라는 좋은 참조가 :

   https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Transitions/Using_CSS_transitions#Detecting_the_start_and_completion_of_a_transition

   애니메이션의 경우 매우 유사 :

   $("#someSelector").bind("animationend webkitAnimationEnd oAnimationEnd MSAnimationEnd", function(){ ... });
   

   당신이 그것을 지원하는 모든 브라우저에서 발사 이벤트를 지원하는 동시에 바인딩 () 메소드로 브라우저 접두사 이벤트 문자열을 모두 통과 할 수 있습니다.

   최신 정보:

   오리 남긴 코멘트 당 : 당신은 단지 한 번 발사 핸들러을 보장하기 위해 jQuery의 사실 말이다 () 메서드를 사용합니다. 예를 들면 :

   $("#someSelector").one("transitionend webkitTransitionEnd oTransitionEnd MSTransitionEnd", function(){ ... });
   
   $("#someSelector").one("animationend webkitAnimationEnd oAnimationEnd MSAnimationEnd", function(){ ... });
   

   업데이트 2 :

   jQuery를 결합 () 메소드는 추천하고 있으며, () 메소드는 jQuery를 1.7으로하는 것이 바람직하다. 묶다()

   당신은 또한 한 번 발사 될 수 있도록 콜백 함수에 () 메소드를 사용할 수 있습니다. 여기에서 () 메소드를 사용하여 상응하는 예이다 :

   $("#someSelector")
   .on("animationend webkitAnimationEnd oAnimationEnd MSAnimationEnd",
    function(e){
       // do something here
       $(this).off(e);
    });
   

   참고 :

2. ---

   2.여기에 관찰 된 참조 문서가 될 수있는 animationend 이벤트가있다, 또한 CSS 전환 애니메이션에 대한 당신은 transitionend 이벤트를 사용할 수 있습니다

   여기에 관찰 된 참조 문서가 될 수있는 animationend 이벤트가있다, 또한 CSS 전환 애니메이션에 대한 당신은 transitionend 이벤트를 사용할 수 있습니다

   이러한 추가 라이브러리 바닐라 JS 모든 작업이 필요 없습니다

   document.getElementById를 ( "myDIV") 또는 addEventListener ( "transitionend", myEndFunction).; myEndFunction 함수 () { this.innerHTML = "전환 이벤트는 종료"; } #myDIV {전환 : 상부 2S; 위치 : 상대; 최고 : 0;} DIV {배경 : #ede; 커서 : 포인터; 패딩 : 20 픽셀;}

   . 애니메이션을 시작하는 저를 클릭

3. ---

   3.또 다른 옵션은 CSS3 전환을 처리하기 위해 jQuery를 교통 프레임 워크를 사용하는 것입니다. 트랜지션은 / 효과는 모바일 장치에서 잘 수행하고 애니메이션 효과를 수행하기 위해 귀하의 CSS 파일에 지저분한 CSS3 전환의 한 줄을 추가 할 필요가 없습니다.

   또 다른 옵션은 CSS3 전환을 처리하기 위해 jQuery를 교통 프레임 워크를 사용하는 것입니다. 트랜지션은 / 효과는 모바일 장치에서 잘 수행하고 애니메이션 효과를 수행하기 위해 귀하의 CSS 파일에 지저분한 CSS3 전환의 한 줄을 추가 할 필요가 없습니다.

   여기에 전환이 완료되면 당신이 그것을 클릭하고 제거 할 때 0에 요소의 불투명도를 전환 할 예입니다 :

   $("#element").click( function () {
       $('#element').transition({ opacity: 0 }, function () { $(this).remove(); });
   });
   

   JS 바이올린 데모

4. ---

   4.이 편리 할 수도 누군가를 위해, 여기 그때 이후로부터 콜백을 받고, CSS 클래스를 통해 CSS 애니메이션을 적용 성공을 가진 jQuery를 의존하는 기능입니다. 나는 그것이 Backbone.js 응용 프로그램에서 사용되는,하지만 어쩌면 도움이되는 한 이후 완벽하게 작동하지 않을 수 있습니다.

   이 편리 할 수도 누군가를 위해, 여기 그때 이후로부터 콜백을 받고, CSS 클래스를 통해 CSS 애니메이션을 적용 성공을 가진 jQuery를 의존하는 기능입니다. 나는 그것이 Backbone.js 응용 프로그램에서 사용되는,하지만 어쩌면 도움이되는 한 이후 완벽하게 작동하지 않을 수 있습니다.

   var cssAnimate = function(cssClass, callback) {
       var self = this;
   
       // Checks if correct animation has ended
       var setAnimationListener = function() {
           self.one(
               "webkitAnimationEnd oanimationend msAnimationEnd animationend",
               function(e) {
                   if(
                       e.originalEvent.animationName == cssClass &&
                       e.target === e.currentTarget
                   ) {
                       callback();
                   } else {
                       setAnimationListener();
                   }
               }
           );
       }
   
       self.addClass(cssClass);
       setAnimationListener();
   }
   

   나는 이런 식으로 좀 그것을 사용

   cssAnimate.call($("#something"), "fadeIn", function() {
       console.log("Animation is complete");
       // Remove animation class name?
   });
   

   http://mikefowler.me/2013/11/18/page-transitions-in-backbone/에서 원래의 아이디어

   그리고이 편리 보인다 http://api.jqueryui.com/addClass/

   최신 정보

   위의 코드 및 기타 옵션과 사투를 벌인 후, 나는 CSS 애니메이션 종료에 대한 듣기에 매우 신중 건의 할 것입니다. 여러 애니메이션이 진행으로,이 이벤트 청취를 위해 매우 빠른 지저분한 얻을 수 있습니다. 난 강력하게 모든 애니메이션, 심지어 작은 것들에 대한 GSAP 같은 애니메이션 라이브러리를 건의 할 것입니다.

5. ---

   5.허용 대답은 현재 크롬에서 애니메이션 두 번 발생합니다. 이 animationEnd뿐만 아니라 webkitAnimationEnd을 인식하기 때문에 아마도이입니다. 다음은 것이다 확실히 한 번만 화재 :

   허용 대답은 현재 크롬에서 애니메이션 두 번 발생합니다. 이 animationEnd뿐만 아니라 webkitAnimationEnd을 인식하기 때문에 아마도이입니다. 다음은 것이다 확실히 한 번만 화재 :

   /* From Modernizr */
   function whichTransitionEvent(){
   
       var el = document.createElement('fakeelement');
       var transitions = {
           'animation':'animationend',
           'OAnimation':'oAnimationEnd',
           'MSAnimation':'MSAnimationEnd',
           'WebkitAnimation':'webkitAnimationEnd'
       };
   
       for(var t in transitions){
           if( transitions.hasOwnProperty(t) && el.style[t] !== undefined ){
               return transitions[t];
           }
       }
   }
   
   $("#elementToListenTo")
       .on(whichTransitionEvent(),
           function(e){
               console.log('Transition complete!  This is the callback!');
               $(this).off(e);
           });
   

from https://stackoverflow.com/questions/9255279/callback-when-css3-transition-finishes by cc-by-sa and MIT license