MOBILE-1035 styles: Animate show/hide mm-loading

Author: crazyserver

www/app.js

@@ -15,7 +15,7 @@
 // Dependencies will be automatically added here, the following line must declare ionic as first dependency
 // and should not be split into multiple lines, see gulpfile.js.
 angular.module('mm', ['ionic', 'ngCordova', 'angular-md5', 'pascalprecht.translate', 'ngAria', 'oc.lazyLoad', 'ckeditor',
-            'ngMessages'])
+            'ngMessages', 'ngAnimate'])
 
 .run(function($ionicPlatform) {
     $ionicPlatform.ready(function() {

www/core/scss/styles.scss

@@ -1609,3 +1609,27 @@ h2.invert {
     }
   }
 }
+
+/* Animations */
+.mm-animate-show,
+.mm-animate-show-hide {
+  &.ng-enter {
+    transition: 0.5s ease all;
+    opacity: 0;
+  }
+
+  &.ng-enter.ng-enter-active {
+    opacity: 1;
+  }
+}
+
+.mm-animate-hide,
+.mm-animate-show-hide {
+  &.ng-leave {
+    transition: 0.5s ease all;
+    opacity: 1;
+  }
+  &.ng-leave.ng-leave-active {
+    opacity: 0;
+  }
+}

www/core/templates/loading.html

@@ -1,9 +1,9 @@
-<div class="mm-loading-container" ng-if="!hideUntil">
+<div class="mm-loading-container mm-animate-show-hide" ng-if="!hideUntil">
     <span class="mm-loading-spinner">
         <ion-spinner></ion-spinner>
         <p class="mm-loading-message" ng-if="dynMessage">{{dynMessage}}</p>
         <p class="mm-loading-message" ng-if="message && !dynMessage">{{message}}</p>
     </span>
 </div>
-<div class="mm-loading-content" ng-if="hideUntil" ng-transclude>
+<div class="mm-loading-content mm-animate-show-hide" ng-if="hideUntil" ng-transclude>
 </div>