Fix flickering popover transitions

Closes #4138

- Removed JS animation to close in favour of CSS animations

core/client/assets/sass/components/dropdowns.scss

@@ -31,7 +31,6 @@
     top: 100%;
     left: 0;
     z-index: 1000;
-    display: none; // none by default, but block on "open" of the menu
     float: left;
     min-width: 220px;
     padding: 5px 0;
@@ -145,6 +144,13 @@
     }
 }
 
+// Closed state for the dropdown
+.closed {
+    > .dropdown-menu {
+        display: none;
+    }
+}
+
 // Menu positioning
 //
 // Add extra class to `.dropdown-menu` to flip the alignment of the dropdown

core/client/assets/sass/helpers/animations.scss

@@ -12,6 +12,7 @@
 }
 .fade-in {
     animation: fade-in 0.2s;
+    animation-fill-mode: forwards;
 }
 
 @keyframes fade-in-snap {
@@ -21,6 +22,25 @@
 }
 
 
+//
+// Fade in scale up
+// --------------------------------------------------
+@keyframes fade-in-scale {
+    from {
+        transform: scale(0.8);
+        opacity: 0;
+    }
+    to {
+        transform: scale(1);
+        opacity: 1;
+    }
+}
+.fade-in-scale {
+    animation: fade-in-scale 0.2s;
+    animation-fill-mode: forwards;
+}
+
+
 //
 // Fade out
 // --------------------------------------------------
@@ -35,4 +55,5 @@
 }
 .fade-out {
     animation: fade-out 0.5s;
+    animation-fill-mode: forwards;
 }

core/client/assets/sass/patterns/_shame.scss

@@ -126,20 +126,4 @@
         }
     } // .floatingheader
 
-} // .scrolling
-
-
- /* ==========================================================================
-   Dropdown Show & Hide
-   ---
-   Sadly !important is needed, to counteract the stringer selectors applying
-   a display property.
-   ========================================================================== */
-
-.ghost-popover {
-    display: none !important;
-}
-
-.ghost-popover.open {
-    display: block !important;
-}
+} // .scrolling

core/client/components/gh-popover.js

@@ -1,15 +1,23 @@
 import PopoverMixin from 'ghost/mixins/popover-mixin';
 
 var GhostPopover = Ember.Component.extend(PopoverMixin, {
-    classNames: 'ghost-popover fade-in',
+    classNames: 'ghost-popover',
     name: null,
     closeOnClick: false,
     //Helps track the user re-opening the menu while it's fading out.
     closing: false,
+    //Helps track whether the popover is open or closes, or in a transition to either
+    isOpen: false,
+    //Managed the toggle between the fade-in and fade-out classes
+    fadeIn: Ember.computed('isOpen', 'closing', function () {
+        return this.get('isOpen') && !this.get('closing');
+    }),
+
+    classNameBindings: ['fadeIn:fade-in-scale:fade-out', 'isOpen:open:closed'],
 
     open: function () {
-        this.set('closing', false);
         this.set('isOpen', true);
+        this.set('closing', false);
         this.set('button.isOpen', true);
     },
     close: function () {
@@ -18,12 +26,12 @@ var GhostPopover = Ember.Component.extend(PopoverMixin, {
         if (this.get('button')) {
             this.set('button.isOpen', false);
         }
-        this.$().fadeOut(200, function () {
-            //Make sure this wasn't an aborted fadeout by
-            //checking `closing`.
-            if (self.get('closing')) {
-                self.set('isOpen', false);
-                self.set('closing', false);
+        this.$().on('animationend webkitAnimationEnd oanimationend MSAnimationEnd', function (event) {
+            if (event.originalEvent.animationName === 'fade-out') {
+                if (self.get('closing')) {
+                    self.set('isOpen', false);
+                    self.set('closing', false);
+                }
             }
         });
     },
@@ -69,4 +77,4 @@ var GhostPopover = Ember.Component.extend(PopoverMixin, {
     }
 });
 
-export default GhostPopover;
+export default GhostPopover;

core/client/mixins/popover-mixin.js

@@ -2,7 +2,7 @@
   Popovers and their buttons are evented and do not propagate clicks.
 */
 var PopoverMixin = Ember.Mixin.create(Ember.Evented, {
-    classNameBindings: ['isOpen:open'],
+    classNameBindings: ['isOpen:open:closed'],
     isOpen: false,
     click: function (event) {
         this._super(event);