Page Transition Content Animation Example

TransitionPageAnimater.js

opts.transitionHandler = function(name, $to, $from, cb) {
	$from.hide(name, {direction: 'left', easing: 'easeOutQuad'}, 350, function() {
		// Transition in the to element
		opts.getContentHolder().append($to);
		$to.show(name, {direction: 'right', easing: 'easeOutQuad'}, 350, function() {
			// Remove the from element
			$from.detach();
			if($.isFunction(cb)) { cb(); }
		});
	});
};

// If we support css transitions, set our alternate transition handler.
if(Modernizr.csstransitions) {	
	//animation complete callback
	$.fn.animationComplete = function( callback ) {
		if( Modernizr.csstransitions ) {
			return $( this ).one( 'webkitAnimationEnd', callback );
		}
		else{
			// defer execution for consistency between webkit/non webkit
			setTimeout( callback, 0 );
			return $( this );
		}
	};
	opts.transitionHandler = function(name, $to, $from, cb) {
		
		$from.addClass('slide out');
		
		$from.animationComplete(function() {
			$from.detach();			
			opts.getContentHolder().append($to);
			$to.addClass('slide in');
		});
		$to.animationComplete( function() {
			if($.isFunction(cb)) { cb(); }
		});
	};
}