MarionetteJS - animate new view by sliding into place

A base template to use for building Backbone and Marionette applications. Includes Twitter Bootstrap http://marionettejs.com

HTML

<script src="http://underscorejs.org/underscore.js"></script>
<script src="http://backbonejs.org/backbone.js"></script>
<script src="https://raw.github.com/marionettejs/backbone.marionette/bb099/lib/backbone.marionette.js"></script>
<link rel="stylesheet" href="http://twitter.github.com/bootstrap/assets/css/bootstrap.css">
<script src="http://twitter.github.com/bootstrap/assets/js/bootstrap.js"></script>
<link rel="stylesheet" href="http://daneden.me/animate/animate.css">
<link rel="stylesheet" href="http://twitter.github.com/bootstrap/assets/css/bootstrap-responsive.css">
<div class="container">
  <div class="row">
    <div class="span12">
      <header>
         <h1>A Marionette Playground</h1>

      </header>
      <div id="deck">
        <div id="sliding-deck"></div>
      </div>
      <br />
      <button id="another" class="btn">Another Slide</button>
      <!--Body content-->
    </div>
  </div>
</div>
<script type="text/html" id="sample-template">
  put some content <%= contentPlacement %> .
</script>
<script type="text/html" id="slide-template">
  <%= html %>
</script>

CSS

#deck {
  position: relative;
  background: #eee;
  width: 300px;
  height: 100px;
  overflow: hidden;
}
#sliding-deck {
  position: absolute;
  top: 0;
  left: 0;
  width: 200%;
  height: 100%;
}
#sliding-deck > div {
  position: absolute;
  top: 0;
  left: 0;
  width: 50%;
  height: 100%;
  color: white;
}
#slide1 {
  background: #009900;
}
#slide2 {
  background: #000099;
}
#slide3 {
  background: #990000;
}
#slide4 {
  background: #999000;
}
#slide5 {
  background: #990009;
}
@-webkit-keyframes slideLeft {
  0% {
    -webkit-transform: translateX(0%);
  }
  100% {
    -webkit-transform: translateX(-50%);
  }
}
.slideLeft {
  -webkit-animation-name: slideLeft;
}

JavaScript

// Define our custom region type

var TransRegion = Backbone.Marionette.Region.extend({

  duration: 1000, // duration of transition in seconds

  // Very similar to show(), but uses css transition class between views
  slideToView: function (newView) {

    // Do we have a view currently?
    var view = this.currentView;
    if (!view || view.isClosed) {
      this.show(newView);
      return;
    }

    Marionette.triggerMethod.call(this, "willTransition", view);

    // append the new view to the side of the current view.
    // it should be just out of view.
    
    var transitionClass = 'animated slideLeft';

    newView.on('render', function () {
      newView.$el.css('left', '50%');
      this.$el.append(newView.el);

      // slide the container to the side, exposing the new view
      this.$el.addClass(transitionClass);

      // after transition, clean up by removing the old view, then
      // re-position everything back to a zero-point.
      _.delay(function () {
        // clean up the old view
        this.close();
        
        // clean up new view and place everything back
        // to a sane starting position, ready for next transition.
        this.currentView = newView;
        newView.$el.css('left', '0px');
        this.$el.removeClass(transitionClass);
        
        // do the things show would normally do
        Marionette.triggerMethod.call(newView, "show");
        Marionette.triggerMethod.call(this, "show", newView);
      }.bind(this), this.duration);
      
    }.bind(this));

    newView.render();
  }

});

// Define the app and a region to show content
// -------------------------------------------

var App = new Marionette.Application();

App.addRegions({
  mainRegion: "#main",
  deckRegion: {
    selector: '#sliding-deck',
    regionType: TransRegion
  }
});

// Create a module to contain some functionality
// ---------------------------------------------

App.module('SlideDeck', function (Mod, App, Backbone, Marionette,...