UI Bootstrap Modal delay when using animate.css classes in windowClass

Question

I'm having issues when using animate.css classes with UI-Bootstrap windowClass option.

for example:

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;
          }
        }
      });

Everything looks great when the modal open, But there is a delay when the modal is closed. the backdrop op ui-bootstrap is removed immediately from the DOM, but there is a delay removing the window and body class.

I made a code-pen to illustrate what I mean. The first button is the normal modal with no screen classes (Work 100%), the other two 'animated' buttons is where I make use of animate.css classes.

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

If you inspect the code you will see the delay or if you close one of the animated modals and immediately try to click another button, nothing happens.

Vinny Vinny · Accepted Answer · 2016-09-12T20:00:46

I've noticed this issue too. I believe the problem is the UI Modal backdrop is animating faster than the modal itself. Try override the backdrop classes that are used to fade in and fade out.

the css classes should be

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

and the one for is disappearing should be

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

If you don't want to override the classes directly you can also attach special classes to the modal backdrop using option

backdropClass : 'mySpecialClass'

UI Bootstrap Modal delay when using animate.css classes in windowClass

1 Answers