pageslide.css y regiones custom: Slide y Flip

AnimatedRegion.js

var AnimatedRegion = Base.Region.extend({
  show: function(view, dir) {
    this.forward = !dir; // true or false
    Base.Region.prototype.show.call(this, view);
  },
  animationClass: "slide",
  open: function(view) {
    this.el = this.$el.get(0);
    var from = this.currentView,
        anim = this.animationClass,
        inName = (this.forward? "in" : "out"),
        outName = (this.forward? "out" : "in");
    if (!from) {
      Base.Region.prototype.open.call(this, view);
    } else {
      this.$el.append(view.render().el);
      view.$el.removeClass("center " + outName).addClass(anim + " trans " + inName);
      view.el.scrollTop = 0;
      this.el.offsetWidth = this.el.offsetWidth;
      from.$el.one("webkitTransitionEnd", _.bind(function() {
        from.stopListening();
        from.remove();
      }, this));
      view.$el.one("webkitTransitionEnd", function() {
        view.$el.removeClass("center").addClass("final");
      });
      view.$el.removeClass(inName).addClass("center");
      from.$el.removeClass("center " + inName).addClass(anim + " trans " + outName);
    }
  },
  close: function() {
    return "Here to override parent";
  }
});

flipregion.js

var FlipRegion = Comp.AnimatedRegion.extend({
  animationClass: "flip"
});

pageslide.css

/* Still dirty and with a lot of old, dead code */

.slide-container {
    position: absolute;
    width: 100%;
    height: 100%;
    overflow: hidden;
}

.trans {
  -webkit-transition-property: -webkit-transform !important;
  -webkit-transition-duration: .25s !important;
  transition-duration: .25s !important;
}

.trans.slide.out {
  width: 100%;
  position: absolute;
  -webkit-transition-duration: .15s !important;
  -webkit-transform: translate3d(-100%,0,0) !important;
}
.trans.slide.in {
  width: 100%;
  position: absolute;
  -webkit-transform: translate3d(100%,0,0) !important;
}
.trans.slide.center {
  width: 100%;
  position: absolute;
  -webkit-transform: translate3d(0,0,0) !important;
}
.trans.finished {
}

/* Flip */

.trans.flip.parent {
  -webkit-perspective: 800px;
}

.trans.flip {
  transform-style: preserve-3d;
  transition-duration: .5s !important;
  -webkit-backface-visibility: hidden;
  -webkit-perspective: 800px;
}

.trans.flip.in {
  width: 100%;
  position: absolute;
  -webkit-transform: rotateY(180deg);
}

.trans.flip.out {
  width: 100%;
  position: absolute;
  -webkit-transform: rotateY(180deg);
}

.trans.flip.center {
  width: 100%;
  position: absolute;
  -webkit-transform: rotateY(0deg);
}


.slide-container > .slide-page {
    /* Fix for jQm */
    min-height: 100%;

    position: absolute !important;
    top: 0 !important;
    left: 0 !important;
    width: 100% !important;
    height: 100% !important;
    display: block !important;
    /*
    -webkit-transform: translate3d(0, 0, 0) !important;
    transform: translate3d(0, 0, 0) !important;
    */
}

.slide-container > .slide-page.transition {
  -webkit-transition-property: -webkit-transform !important;
  -webkit-transition-duration: .25s !important;
  transition-duration: .25s !important;
  /*
  transition-timing-function: ease-in-out;
  -webkit-transition-timing-function: ease-in-out;
  */
}

/* fast 3d accelerated slide (iOS, Android >= 3/4) */

.slide-container > .slide-page.fast.left {
  -webkit-transform: translate3d(-100%, 0, 0) !important;
  transform: translate3d(-100%, 0, 0) !important;
}

.slide-container > .slide-page.fast.right {
  -webkit-transform: translate3d(100%, 0, 0) !important;
  transform: translate3d(100%, 0, 0) !important;
}

.slide-container > .slide-page.fast.center {
  /*
  -webkit-transform: translate3d(0, 0, 0) !important;
  transform: translate3d(0, 0, 0) !important;
  */

  /* Because Chrome can render postion:fixed when a transformation
   * is active. We need fixed for the top bar */
  -webkit-transform: none !important;
  transform: none !important;
}

/* 2d transformations (Android < 3) */

.slide-container > .slide-page.slow.left {
  transform: translate(-100%) !important;
  -webkit-transform: translate(-100%) !important;
}

.slide-container > .slide-page.slow.center {
  /* Because Chrome can render postion:fixed when a transformation
   * is active. We need fixed for the top bar */
  -webkit-transform: translate(0) !important;
  transform: translate(0) !important;
}

.slide-container > .slide-page.slow.finished {
  /* Because Chrome can render postion:fixed when a transformation
   * is active. We need fixed for the top bar */
  -webkit-transform: none !important;
  transform: none !important;
}

.slide-container > .slide-page.slow.right {
  transform: translate(100%) !important;
  -webkit-transform: translate(100%) !important;
}

.slide-container > .slide-page.slow.transition {
  /*
  transition-timing-function: linear;
  -webkit-transition-timing-function: linear;
  */
}

/* Nothing at all */

.slide-container > .slide-page.none.left {
  transform: translate(0) !important;
  -webkit-transform: translate(0) !important;
}

.slide-container > .slide-page.none.center {
  transform: translate(0) !important;
  -webkit-transform: translate(0) !important;
}

.slide-container > .slide-page.none.right {
  transform: translate(0) !important;
  -webkit-transform: translate(0) !important;
}

.slide-container > .slide-page.none.transition {
  -webkit-transition-property: -webkit-transform !important;
  -webkit-transition-duration: .01s !important;
  transition-duration: .01s !important;
}

slideregion.js

var SlideRegion = AnimatedRegion.extend({
  animationClass: "slide"
});