Css 'Page' slide animation w listeners

by amindunited

HTML

<div class="fauxBody">
    <div class="page red"></div>
    <div class="page green current"></div>
    <div class="page blue next"></div>
</div>

CSS

.fauxBody {
    position:absolute;
    left: 40%;
    top:0;
    border: solid 1px green;
    width: 20%;
    height: 100%;
}
.page {
    
    -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.prev {
  -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: .9s;
  transition-duration: .9s;

}

.red {
    background-color: rgba(255, 0, 0, .5);
}

.green {
    background-color: rgba(0, 255, 0, .5);
}

.blue {
    background-color: rgba(0, 0, 255, .5);
}

JavaScript

/* Request Animation Frame SHIM */
// shim layer with setTimeout fallback
window.requestAnimFrame = (function(){
    return  window.requestAnimationFrame       ||
        window.webkitRequestAnimationFrame ||
        window.mozRequestAnimationFrame    ||
        function( callback ){
            window.setTimeout(callback, 1000 / 60);
        };
})();

/* Deal with animation event prefixes */
var pfx = ["webkit", "moz", "MS", "o", ""];

function PrefixedEvent(element, type, callback) {
	for (var p = 0; p < pfx.length; p++) {
		if (!pfx[p]) type = type.toLowerCase();
		element.addEventListener(pfx[p]+type, callback, false);
	}
}


window.setTimeout(function(){
    $('.page').first().addClass('prev').addClass('transition');
    var elm = $('.page')[0];
    PrefixedEvent(elm, 'transitionEnd', function(e){
        console.log("transition end", e);
        $(e.target).removeClass('transition');
        
        var n = $('.next');
        var c = $('.current');
        
        n.removeClass('next').addClass('current transition');
        c.removeClass('current').addClass('next transition');
        
        
        
        $('.transition').each(function(i, o){
            PrefixedEvent(o, 'transitionEnd', function(e){
                console.log("moop");
                $(e.target).removeClass('transition');
            });
        });
        
    });
    
    
}, 2000);