Improve popup animation

When going back wait for the popup transition to end before removing
the DOM element.

1 files changed, 24 insertions, 0 deletions

diff --git a/client/components/main/popup.js b/client/components/main/popup.js
index e6ce8051..dbd99e4d 100644
--- a/client/components/main/popup.js
+++ b/client/components/main/popup.js
@@ -1,3 +1,12 @@
+// XXX This event list should be abstracted somewhere else.
+var endTransitionEvents = [
+  'webkitTransitionEnd',
+  'otransitionend',
+  'oTransitionEnd',
+  'msTransitionEnd',
+  'transitionend'
+].join(' ');
+
 Popup.template.events({
   click: function(evt) {
     if (evt.originalEvent) {
@@ -14,3 +23,18 @@ Popup.template.events({
     this.__afterConfirmAction.call(this);
   }
 });
+
+// When a popup content is removed (ie, when the user press the "back" button),
+// we need to wait for the container translation to end before removing the
+// actual DOM element. For that purpose we use the undocumented `_uihooks` API.
+Popup.template.onRendered(function() {
+  var container = this.find('.content-container');
+  container._uihooks = {
+    removeElement: function(node) {
+      $(node).addClass('no-height');
+      $(container).one(endTransitionEvents, function() {
+        node.parentNode.removeChild(node);
+      });
+    }
+  };
+});