animate I say!

UI/Content/base.less

@@ -79,6 +79,10 @@ html {
   margin-bottom: 30px;
 }
 
+.page-container {
+  min-height: 600px;
+}
+
 button::-moz-focus-inner, a::-moz-focus-inner {
   border: 0;
 }

UI/Index.html

@@ -103,6 +103,7 @@
 <script src="/templates.js"></script>
 
 <script src="/Mixins/backbone.marionette.templates.js"></script>
+<script src="/Mixins/backbone.marionette.region.mixin.js"></script>
 <script src="/Mixins/backbone.ajax.js"></script>
 <script src="/Mixins/tablesorter.extensions.js"></script>
 <script src="/Mixins/spoon.js"></script>

UI/Mixins/backbone.marionette.region.mixin.js

@@ -0,0 +1,20 @@
+"use strict";
+
+(function () {
+
+    var _originalRegionClose = Marionette.Region.prototype.close;
+
+    Marionette.Region.prototype.open = function (view) {
+        var self = this;
+
+        this.$el.fadeOut(200, function () {
+            _originalRegionClose.apply(this, arguments);
+            self.$el.html(view.el);
+            self.$el.fadeIn(150);
+        });
+    };
+
+    Marionette.Region.prototype.close = function () {
+        //do nothing. we close the region as part of open so we can chain the animation
+    };
+}());