UI 부트 스트랩 windowClass에서 animate.css 클래스를 사용할 때 모달 지연

Question

UI- 부트 스트랩 windowClass 옵션이있는 animate.css 클래스를 사용할 때 문제가 있습니다. 예를 들어

: 모달 닫을 때 모달 개방은, 그러나 지연이있을 때

vm.open = function() { 
     var modalInstance = $uibModal.open({ 
     templateUrl: 'myModalContent.html', 
     controller: 'ModalInstanceCtrl', 
     controllerAs: 'vm', 
     windowClass: 'animated zoomIn',  // Issue is over here. 
     resolve: { 
      items: function() { 
      return vm.items; 
      } 
     } 
     }); 

모든 것이 멋지다. 백 드롭 op UI 부트 스트랩은 DOM에서 즉시 제거되지만 윈도우 및 본문 클래스를 제거하는 데 지연이 있습니다.

내가 무슨 뜻인지 설명하기 위해 코드 펜을 만들었습니다. 첫 번째 버튼은 화면 클래스가없는 일반 모달이며 (작업 100 %) 다른 두 개의 '애니메이션'버튼은 animate.css 클래스를 사용하는 곳입니다.

http://codepen.io/DickSwart/pen/XjbkYw

코드를 검사 할 경우 지연을 볼 수 있습니다 또는 애니메이션 조동사 중 하나를 닫고 즉시 다른 버튼을 클릭하려고하면 아무 일도 발생하지 않습니다.

Answer 1

이 문제도 눈치 챘습니다. 문제는 UI 모달 배경이 모달 자체보다 빠르게 애니메이션화되고 있다고 생각합니다. 페이드 인하거나 페이드 아웃하는 데 사용되는 배경 클래스를 재정의 해보십시오.

CSS의 클래스는

.fade.in { /*override transition time here */} 

및 사라지고위한 하나의 당신이 또한 특별한 클래스를 첨부 할 수 있습니다 직접 클래스를 오버라이드 (override)하지 않으려면

.fade.out { /*override transition time here */} 

을해야해야 모달 배경 옵션 사용

backdropClass : 'mySpecialClass'