MarionetteJS (Backbone.Marionette) Playground - testing css animations

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

by Jon Beebe

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>
      <div class="container">
        <div class="row">
          <div class="span12">
            <button id="another" class="btn">Another Slide</button>
          </div>
        </div>
      </div>
      <!--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;
}
#deck > div {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  color: white;
}
#slide1 {
  background: #009900;
}
#slide2 {
  background: #000099;
}
#slide3 {
  background: #990000;
}
#slide4 {
  background: #999000;
}
#slide5 {
  background: #990009;
}
.row {
  margin-top: 1em;
}

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
  fadeToView: function (newView) {

    console.log('fadeToView');

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

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

    // Begin the transition
    view.$el.addClass('animated fadeOut');

    // Save a reference to the newView for later use...
    // This ref is temporary, only used during the life of the transitions.
    this.newView = newView;

    // Wait for the duration of the out transition, then continue.
    _.delay(this.onTransitionOutComplete.bind(this), this.duration);

  },

  // After the currentView has transitioned out of view, proceed.
  onTransitionOutComplete: function () {
    // show the current view. The transition should have left the container
    // in an out-of-view state so we can transition back in.
    this.show(this.newView);

    // Clear than newView reference.
    this.newView = undefined;

    // Begin the transition of the new view into view.
    this.currentView.$el.addClass('animated fadeIn');

    // Wait for the transition to end, then continue...
    _.delay(this.onTransitionInComplete.bind(this), this.duration);
  },

  // After the new view has transitioned into view, proceed.
  onTransitionInComplete: function () {
    Marionette.triggerMethod.call(this, "transition");
    this.currentView.$el.removeClass('animated fadeIn');
  },

});

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

var App = new Marionette.Application();

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

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