Ember Transitions and Gridster

HTML

<link rel="stylesheet" href="https://rawgithub.com/ducksboard/gridster.js/master/dist/jquery.gridster.css" />

<script type="text/x-handlebars" data-template-name="application">
    
    <div class="pageWrap">
        {{outlet}}
    </div>
    <nav class="mainNav">
        <ul>
            <li>{{#link-to 'home'}}Home{{/link-to}}</li>
            <li>{{#link-to 'grids'}}Grids{{/link-to}}</li>
        </ul>
    </nav>
    
</script>
<script type="text/x-handlebars" data-template-name="home">
    
    <div {{bind-attr class=":page view.current view.previous view.next"}}>
        <h1>Home Page</h1>
    </div>
    {{outlet}}
</script>
<script type="text/x-handlebars" data-template-name="grids">
    
    <div {{bind-attr class=":page view.current view.previous view.next"}}>
        <h1>Grids</h1>
        <nav>
            <ul>
                <li class="icon-squared-plus" {{action 'addBox' target="controller"}}></li>
            </ul>
        </nav>
        <ul class="gridster">
        {{render gridCollection}}
        </ul>
    </div>
    {{outlet}}
</script>
<script type="text/x-handlebars" data-template-name="grid">
    <div class="container">
        <div class="face front">
            <div class="header">{{view.content.title}}</div>
            <nav>
                <ul>
                    <li class="icon-cog control"></li>
                </ul>
            </nav>
        </div>
        <div class="face back">
            <div class="header">Edit</div>
            <nav>
                <ul>
                    <li class="icon-level-up control"></li>
                </ul>
            </nav>
            <div>Edit the Title:</div>
            {{input type="text" value=view.content.title}}
        </div>
    </div>
</script>
<script src="//cdnjs.cloudflare.com/ajax/libs/handlebars.js/1.3.0/handlebars.js"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/ember.js/1.5.1/ember.min.js"></script>
<script...

CSS

.mainNav { width: 100%; height: 30px; background-color: #27ae60;/*#8da865;*/ }
.mainNav > ul > li { 
    min-width: 15%; 
    padding:2px 5px 2px 5px; 
    float:left; 
    line-height: 26px; 
    border-left:solid 1px #16a085;//#95b567;
    border-right: solid 1px #2ecc71;//#6d8944; 
    text-align:center; 
}
.mainNav > ul > li > a { color: white; font-weight: bold; }
/* */



/* */
.pageWrap {
    position: absolute;
    left: 0%;
    top: 30px;
    width: 100%;
    height: 100%;
    border: solid 1px #336633;
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
}
/*
Page transitions
*/
.page {
    /*margin-top: 90px;*/
    -webkit-transform: translate3d(0, 0, 0);
    transform: translate3d(0, 0, 0);
    position:absolute;
    height: 100%;
    width:100%;
    top: 0px;
    left: 0;
    background-color: rgba(200, 200, 200, .5);

    overflow: auto;
    -webkit-overflow-scrolling: touch;
    -webkit-transform: translate3d(0%, 0, 0);
    transform: translate3d(0%, 0, 0);
}

.page.current {
  -webkit-transform: translate3d(0, 0, 0);
  transform: translate3d(0, 0, 0);
}

.page.previous {
  -webkit-transform: translate3d(-100%, 0, 0);
  transform: translate3d(-100%, 0, 0);
}
 
.page.next {
  -webkit-transform: translate3d(100%, 0, 0);
  transform: translate3d(100%, 0, 0);
}
 
.page.transition {
  -webkit-transition-duration: .5s;
  transition-duration: .5s;
}


.gridster li:nth-of-type(20n + 1) {
    background: #1abc9c; }
.gridster li:nth-of-type(20n + 2) {
    background: #16a085; }
.gridster li:nth-of-type(20n + 3) {
    background: #2ecc71; }
.gridster li:nth-of-type(20n + 4) {
    background: #27ae60; }
.gridster li:nth-of-type(20n + 5) {
    background: #3498db; }
.gridster li:nth-of-type(20n + 6) {
    background: #2980b9; }
.gridster li:nth-of-type(20n + 7) {
    background: #9b59b6; }
.gridster li:nth-of-type(20n + 8) {
    background: #8e44ad; }
.gridster li:nth-of-type(20n + 9) {
    background: #34495e;...

JavaScript

App = Em.Application.create();
App.Router.map(function(){
    this.resource('home', {path:'/'}, function(){
        this.resource('grids', {path:'/grids'}, function(){
        
        });
    });
});

App.PageView = Em.View.extend({
    
    current: false,
	previous: false,
	next: true,
    
	animateIn: function(done){
		
		this.get('parentView').set('previous', true);
		this.get('parentView').set('next', false);
		this.get('parentView').set('current', false);
		
		var pp = this.get('parentView').$('.page').first();
		pp.addClass('transition');

        done.call(this);
		
        PrefixedEvent(pp[0], 'transitionEnd', function(e){
			$(e.target).removeClass('transition');
		});
	},
	animateOut: function(done){
		//
		this.set('previous', false);
		this.set('next', true);
		this.set('current', false);
		
		var pp = this.$('.page').first();
		pp.addClass('transition');

		PrefixedEvent(pp[0], 'transitionEnd', function(e){
			$(e.target).removeClass('transition');
			done.apply(this);
		});

		//Set classes on the parent
		this.get('parentView').set('previous', false);
		this.get('parentView').set('next', false);
		this.get('parentView').set('current', true);
		
		pp = this.get('parentView').$('.page').first();
		pp.addClass('transition');

		PrefixedEvent(pp[0], 'transitionEnd', function(e){
			$(e.target).removeClass('transition');
		});

	}

});
App.PageCollectionView = Em.CollectionView.extend({
    
    current: false,
	previous: false,
	next: true,
    
	animateIn: function(done){
		
		this.get('parentView').set('previous', true);
		this.get('parentView').set('next', false);
		this.get('parentView').set('current', false);
		
		var pp = this.get('parentView').$('.page').first();
		pp.addClass('transition');

        done.call(this);
		
        PrefixedEvent(pp[0], 'transitionEnd', function(e){
			$(e.target).removeClass('transition');
		});
	},
	animateOut: function(done){
		//
		this.set('previous', false);
		this.set('next', true);
		this.set('current',...