animate.css 애니메이션이 백본보기에서 addClass로 완료되었는지 확인하는 방법은 무엇입니까?

Question

animate.css을 사용하면 내 백본보기에 멋진 효과를 줄 수 있습니다. 내가 사용하는 애니메이션 중 하나는 목록 항목이 삭제 될 때 flipOutX입니다. 당신이 주변에 어떤 일을해야합니까이 효과를 적용 할

drop: function() { 
    var that = this; 
    this.$el.addClass('animated flipOutX'); 
    setTimeout(function() { 
     that.remove(); 
    }, 1000); 
} 

이 setTimeout를 사용하는 것은 정말 나쁜 생각이라고 알고 : 여기

내 드롭 기능입니까? 보기를 효과적으로 제거하기 전에 setTimeout을 사용하여 addClass 효과가 완료되었는지 확인하고 있습니다. 여기 내 문제는 addClass이 비동기 적이라는 사실입니다.

Answer 1

이 시도 :

this.$el.addClass('animated flipOutX').promise().done(function() { $(this).remove(); }); 

완료 (.CSS() 및 .addClass() .toggleClass() 및 .removeClass()을 포함)의 시각 효과를 다루는 기능 그들이 지연된 리턴/Promise 객체 - 콜백을 호출하는 완료 이벤트를 등록합니다 (.done()의 함수로 정의 됨). jQuery API 웹 사이트는 더 자세히 설명되어 있지만 시각적 이벤트를 연기해야 ​​할 때 사용해야하는 패턴입니다. 또한 효과를보다 직접 제어하기 위해 큐/큐 해제 시스템에 들어갈 수 있습니다.

Answer 2

애니메이션을 끝내고 앞으로 이동했는지 확인하고 몇 가지 방법이 있습니다. 애니메이션 또는 전환이 완료되었는지 확인해야 할 필요에 따라 아래의 모듈러 함수를 사용할 수 있습니다. 여기

 /* 
     * @support check if animation is finished 
     */ 
    var whichAnimationEvent = function whichAnimationEvent() { 
      var t, 
       el = document.createElement("fakeelement"); 

      var animations = { 
       "animation": "animationend", 
       "OAnimation": "oAnimationEnd", 
       "MozAnimation": "animationend", 
       "WebkitAnimation": "webkitAnimationEnd" 
      } 

      for (t in animations) { 
       if (el.style[t] !== undefined) { 
        return animations[t]; 
       } 
      } 
     } 
     /* 
     * @support check if transition is finished 
     */ 
    var whichTransitionEvent = function whichTransitionEvent() { 
      var t, 
       el = document.createElement("fakeelement"); 

      var transitions = { 
       "transition": "transitionend", 
       "OTransition": "oTransitionEnd", 
       "MozTransition": "transitionend", 
       "WebkitTransition": "webkitTransitionEnd" 
      } 

      for (t in transitions) { 
       if (el.style[t] !== undefined) { 
        return transitions[t]; 
       } 
      } 
     } 

는 예를 http://codepen.io/yoeman/pen/QGPMQz

이 도움이 희망입니다!