UI Bootstrap Модальная задержка при использовании классов animate.css в windowClass

Question

У меня возникли проблемы при использовании animate.css классов с параметром windowClass UI-Bootstrap.

, например:

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-bootstrap немедленно удаляется из DOM, но есть задержка, удаляющая окно и класс тела.

Я сделал кодовое перо, чтобы проиллюстрировать, что я имею в виду. Первая кнопка - обычный модальный, без классов экрана (Работа 100%), две другие «анимированные» кнопки - это то, где я использую классы animate.css.

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

Если вы проверяете код, который вы увидите задержку или если закрыть один из мультипликационных модальностей и сразу попробуйте нажать другую кнопку, ничего не происходит.

Answer 1

Я тоже заметил эту проблему. Я считаю, что проблема заключается в том, что модальный фон UI анимационирует быстрее, чем сам модальный. Попробуйте переопределить классы фона, которые используются для постепенного исчезновения и исчезновения.

классы CSS должны быть

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

и один для исчезает должен быть

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

Если вы не хотите, чтобы переопределить эти классы непосредственно вы можете также прикрепить специальные классы к с использованием опции

backdropClass : 'mySpecialClass'