manufaktor · September 23, 2013 15:23 · Sep 23, 2013
diff --git a/application_route.js b/application_route.js
@@ -0,0 +1,34 @@
+// animated route transition workaround for ember
+// this workaround only deals with the current view
+// if you need to animate the new and the old view in parallel this won't help you.
+
+App.ApplicationRoute = Ember.Route.extend({
+  actions: {
+    willTransition: function(transition){
+      if(!this.isInTransition){
+
+        // stop transition until animation is complete
+        // otherwise ember will remove the current screen immediately
+        // from the DOM and we can't animate
+        transition.abort();
+        this.isInTransition = true
+
+        // now run animation. example:
+        // set isAnimating on application controller. 
+        // bind className to isAnimating in your application template.
+        this.get('controller').set('isAnimating', true)
+        // continue...
+
+        var self = this;
+        setTimeout(function(){
+
+          // redo the transition once the animation is done
+          // reset transition state after the retry
+          // so we don't end up in an indefinite loop
+          transition.retry()
+          self.isInTransition = false
+        }, 200)
+      }
+    }
+  }
+})
No results found