Merge pull request #554 from matthojo/Modal-Improvements

Improved Modals transitions

core/client/assets/lib/jquery-utils.js

@@ -50,6 +50,39 @@
         });
     };
 
+    // ## getTransformProperty
+    // This returns the transition duration for an element, good for calling things after a transition has finished.
+    // **Original**: [https://gist.github.com/mandelbro/4067903](https://gist.github.com/mandelbro/4067903)
+    // **returns:** the elements transition duration
+    $.fn.transitionDuration = function () {
+        var $this = $(this);
+
+        // check the main transition duration property
+        if ($this.css('transition-duration')) {
+            return Math.round(parseFloat(this.css('transition-duration')) * 1000);
+        }
+
+        // check the vendor transition duration properties
+        if (this.css('-webkit-transtion-duration')) {
+            return Math.round(parseFloat(this.css('-webkit-transtion-duration')) * 1000);
+        }
+
+        if (this.css('-ms-transtion-duration')) {
+            return Math.round(parseFloat(this.css('-ms-transtion-duration')) * 1000);
+        }
+        
+        if (this.css('-moz-transtion-duration')) {
+            return Math.round(parseFloat(this.css('-moz-transtion-duration')) * 1000);
+        }
+
+        if (this.css('-o-transtion-duration')) {
+            return Math.round(parseFloat(this.css('-o-transtion-duration')) * 1000);
+        }
+
+        // if we're here, then no transition duration was found, return 0
+        return 0;
+    };
+
     $.fn.selectText = function () {
         var elem = this[0],
             range,

core/client/assets/sass/modules/global.scss

@@ -10,6 +10,8 @@
  * Global Navigation
  * Mobile Navigation
  * Drop-down / Pop-up Menu
+ * Notifications
+ * Modals
  * Main Elements
  * Floating Headers
  * Image Uploader
@@ -915,7 +917,8 @@ nav {
         left: 0;
         right: 0;
         z-index: 999;
-        @include transition(background 300ms ease);
+        @include transition(all 0.15s linear 0s);
+        @include transform(translateZ(0));
 
         &.dark {
             background: rgba(0,0,0,0.4);
@@ -934,7 +937,7 @@ nav {
 }
 
 body.blur > *:not(#modal-container) {
-    @include transition(all 300ms ease);
+    @include transition(all 0.15s linear 0s);
     -webkit-filter: blur(2px);
        -moz-filter: blur(2px);
         -ms-filter: blur(2px);
@@ -955,8 +958,13 @@ body.blur > *:not(#modal-container) {
     overflow:auto;
     z-index: 1001;
 
-    &.fadeIn {
-        @include animation(fadeIn 0.3s linear 1);
+    &.fade {
+        opacity: 0;
+        @include transition(opacity 0.2s linear 0s);
+
+        &.in {
+            opacity: 1;
+        }
     }
 }
 

core/client/views/base.js

@@ -1,4 +1,4 @@
-/*global window, document, Ghost, $, _, Backbone, JST, shortcut */
+/*global window, document, setTimeout, Ghost, $, _, Backbone, JST, shortcut */
 (function () {
     "use strict";
 
@@ -264,6 +264,10 @@
                 $("body").addClass("blur");
             }
 
+            if (this.model.options.animation) {
+                this.animate(this.$el.children(".js-modal"));
+            }
+
             var self = this;
             $(window).on('resize', self.resize);
 
@@ -289,17 +293,37 @@
                 e.stopPropagation();
             }
 
-            var self = this;
-            this.$el.removeClass('dark');
-            $('.js-modal').fadeOut(300, function () {
-                $(this).remove();
+            var self = this,
+                $jsModal = $('.js-modal'),
+                removeModalDelay = $jsModal.transitionDuration(),
+                removeBackgroundDelay = self.$el.transitionDuration();
+
+            $jsModal.removeClass('in');
+
+            if (!this.model.options.animation) {
+                removeModalDelay = removeBackgroundDelay = 0;
+            }
+
+            setTimeout(function () {
+
                 if (document.body.style.filter !== undefined) {
                     $("body").removeClass("blur");
                 }
-                self.remove();
-                self.$el.removeClass('active');
-            });
+                self.$el.removeClass('dark');
 
+                setTimeout(function () {
+                    self.remove();
+                    self.$el.removeClass('active');
+                }, removeBackgroundDelay);
+            }, removeModalDelay);
+
+        },
+        // #### animate
+        // Animates the animation
+        animate: function (target) {
+            setTimeout(function () {
+                target.addClass('in');
+            }, target.transitionDuration());
         }
     });
 

core/client/views/blog.js

@@ -177,7 +177,7 @@
                         },
                         type: "action",
                         style: "wide",
-                        animation: 'fadeIn'
+                        animation: 'fade'
                     },
                     content: {
                         template: 'blank',

core/client/views/editor.js

@@ -315,7 +315,7 @@
                         close: true,
                         type: "info",
                         style: "wide",
-                        animation: 'fadeIn'
+                        animation: 'fade'
                     },
                     content: {
                         template: 'markdown',
@@ -379,7 +379,7 @@
                         close: true,
                         type: "info",
                         style: "wide",
-                        animation: 'fadeIn'
+                        animation: 'fade'
                     },
                     content: {
                         template: 'copyToHTML',