feat(modal): change to use $animate

- Change to use $animate and $animateCss

Closes #3418
Closes #4834

Author: wesleycho

src/modal/modal.js

@@ -107,14 +107,8 @@ angular.module('ui.bootstrap.modal', ['ui.bootstrap.stackedMap'])
   }])
 
   .directive('uibModalWindow', [
-           '$uibModalStack', '$q', '$animate', '$injector',
-  function($modalStack ,  $q ,  $animate,   $injector) {
-    var $animateCss = null;
-
-    if ($injector.has('$animateCss')) {
-      $animateCss = $injector.get('$animateCss');
-    }
-
+           '$uibModalStack', '$q', '$animate', '$animateCss',
+  function($modalStack, $q, $animate, $animateCss) {
     return {
       scope: {
         index: '@'
@@ -160,13 +154,9 @@ angular.module('ui.bootstrap.modal', ['ui.bootstrap.stackedMap'])
           var animationPromise = null;
 
           if (attrs.modalInClass) {
-            if ($animateCss) {
-              animationPromise = $animateCss(element, {
-                addClass: attrs.modalInClass
-              }).start();
-            } else {
-              animationPromise = $animate.addClass(element, attrs.modalInClass);
-            }
+            animationPromise = $animateCss(element, {
+              addClass: attrs.modalInClass
+            }).start();
 
             scope.$on($modalStack.NOW_CLOSING_EVENT, function(e, setIsAsync) {
               var done = setIsAsync();
@@ -230,22 +220,14 @@ angular.module('ui.bootstrap.modal', ['ui.bootstrap.stackedMap'])
   })
 
   .factory('$uibModalStack', [
-             '$animate', '$timeout', '$document', '$compile', '$rootScope',
+             '$animate', '$animateCss', '$timeout', '$document', '$compile', '$rootScope',
              '$q',
-             '$injector',
              '$$multiMap',
              '$$stackedMap',
-    function($animate ,  $timeout ,  $document ,  $compile ,  $rootScope ,
+    function($animate ,   $animateCss,   $timeout ,  $document ,  $compile ,  $rootScope ,
               $q,
-              $injector,
               $$multiMap,
               $$stackedMap) {
-      var $animateCss = null;
-
-      if ($injector.has('$animateCss')) {
-        $animateCss = $injector.get('$animateCss');
-      }
-
       var OPENED_MODAL_CLASS = 'modal-open';
 
       var backdropDomEl, backdropScope;
@@ -350,15 +332,12 @@ angular.module('ui.bootstrap.modal', ['ui.bootstrap.stackedMap'])
           }
           afterAnimating.done = true;
 
-          if ($animateCss) {
-            $animateCss(domEl, {
-              event: 'leave'
-            }).start().then(function() {
-              domEl.remove();
-            });
-          } else {
-            $animate.leave(domEl);
-          }
+          $animateCss(domEl, {
+            event: 'leave'
+          }).start().then(function() {
+            domEl.remove();
+          });
+
           scope.$destroy();
           if (done) {
             done();
@@ -441,7 +420,7 @@ angular.module('ui.bootstrap.modal', ['ui.bootstrap.stackedMap'])
             angularBackgroundDomEl.attr('modal-animation', 'true');
           }
           backdropDomEl = $compile(angularBackgroundDomEl)(backdropScope);
-          appendToElement.append(backdropDomEl);
+          $animate.enter(backdropDomEl, appendToElement);
         }
 
         var angularDomEl = angular.element('<div uib-modal-window="modal-window"></div>');
@@ -460,8 +439,10 @@ angular.module('ui.bootstrap.modal', ['ui.bootstrap.stackedMap'])
         var modalDomEl = $compile(angularDomEl)(modal.scope);
         openedWindows.top().value.modalDomEl = modalDomEl;
         openedWindows.top().value.modalOpener = modalOpener;
-        appendToElement.append(modalDomEl);
-        appendToElement.addClass(modalBodyClass);
+        $animate.enter(modalDomEl, appendToElement)
+          .then(function() {
+            $animate.addClass(appendToElement, modalBodyClass);
+          });
 
         $modalStack.clearFocusListCache();
       };

src/modal/test/modal.spec.js

@@ -888,6 +888,8 @@ describe('$uibModal', function () {
           template: '<div>dummy modal</div>'
         });
 
+        $animate.flush();
+
         expect(body).toHaveClass('modal-open');
       });
 
@@ -897,6 +899,8 @@ describe('$uibModal', function () {
           openedClass: 'foo'
         });
 
+        $animate.flush();
+
         expect(body).toHaveClass('foo');
         expect(body).not.toHaveClass('modal-open');
       });
@@ -907,6 +911,8 @@ describe('$uibModal', function () {
           openedClass: 'foo'
         });
 
+        $animate.flush();
+
         expect(body).toHaveClass('foo');
 
         close(modal);
@@ -920,6 +926,8 @@ describe('$uibModal', function () {
           openedClass: 'foo'
         });
 
+        $animate.flush();
+
         expect(body).toHaveClass('foo');
         expect(body).not.toHaveClass('modal-open');
 
@@ -928,6 +936,8 @@ describe('$uibModal', function () {
           openedClass: 'bar'
         });
 
+        $animate.flush();
+
         expect(body).toHaveClass('foo');
         expect(body).toHaveClass('bar');
         expect(body).not.toHaveClass('modal-open');
@@ -937,6 +947,8 @@ describe('$uibModal', function () {
           openedClass: 'foo'
         });
 
+        $animate.flush();
+
         expect(body).toHaveClass('foo');
         expect(body).toHaveClass('bar');
         expect(body).not.toHaveClass('modal-open');
@@ -1009,9 +1021,11 @@ describe('$uibModal', function () {
       expect(body).not.toHaveClass('modal-open');
 
       var modal1 = open({template: '<div>Content1</div>'});
+      $animate.flush();
       expect(body).toHaveClass('modal-open');
 
       var modal2 = open({template: '<div>Content1</div>'});
+      $animate.flush();
       expect(body).toHaveClass('modal-open');
 
       dismiss(modal1);