dbouwman/jsbin.aPagAYIb.css

## jsbin.aPagAYIb.css
.container{
  position:absolute;
  width:100%;
  /*overflow:hidden;  */
}

.layout {
  position:absolute;
  width:90%;
  height:100%;
  top:0xp

}

#one{
  position:relative;
  border:2px solid red;
}

#two{
  position:absolute;
  border:2px solid blue;
  top:0px;
}

.new {
  left:100%;
  float:right;
  visibility:hidden;
}


## jsbin.aPagAYIb.html
<!DOCTYPE html>
<html>
<head>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.8/jquery.min.js"></script>
<meta name="description" content="transition hacking 2" />
<meta charset=utf-8 />
<title>JS Bin</title>
</head>
<body>
  <button id="toLeft"> Slide Left</button>
    <button id="clear"> Clear Trans</button>
  <button id="toRight">Slide Right</button>
  <div class="container">
    <div id="one" class="layout current">
      <h2>ONE</h2>
      <img src='http://baconmockup.com/300/200'/>
    </div>
    <div id="two" class="layout new">
      <h2>TWO</h2>
     <img src='http://baconmockup.com/300/200'/>

    </div>
  </div>
</body>
</html>

## jsbin.aPagAYIb.js
$('#toLeft').on('click', function(){
  var w =  $('.container').width();
  $('#two').css('visibility', 'visible');
  $('#one').one('transitionend', function(target){
    console.log('done one trans');
    $('#one').css('-webkit-transition','');
    $('#one').css('-webkit-transform', '');
    $('#one').css('visibility','hidden').css('left','-' + w + 'px');
  });

  $('#two').one('transitionend', function(target){
    console.log('done two trans');
    $('#two').css('left',0);
    $('#two').css('-webkit-transition','');
    $('#two').css('-webkit-transform', '');
  });
    $('.container').css('width');
  $('.layout').css('-webkit-transition','all 0.4s');
  $('.layout').css('-webkit-transform', 'translate3d(-' + w + 'px, 0, 0)');

});

$('#toRight').on('click', function(){
  var w =  $('.container').width();
  $('#one').css('visibility', 'visible');
  $('#two').one('transitionend', function(target){
    console.log('done two right-trans');
    $('#two').css('-webkit-transition','');
    $('#two').css('-webkit-transform', '');
    $('#two').css('visibility','hidden').css('left','100%');
  });

  $('#one').one('transitionend', function(target){
    console.log('done one right-trans');
    $('#one').css('left',0);
    $('#one').css('-webkit-transition','');
    $('#one').css('-webkit-transform', '');
  });
  $('.container').css('width');
  $('.layout').css('-webkit-transition','all 0.4s');
  $('.layout').css('-webkit-transform', 'translate3d(' + w + 'px, 0, 0)');
});

$('#clear').on('click', function(){
  $('.layout').css('-webkit-transform', '');
});
	.container{
	position:absolute;
	width:100%;
	/overflow:hidden; /
	}

	.layout {
	position:absolute;
	width:90%;
	height:100%;
	top:0xp

	}

	#one{
	position:relative;
	border:2px solid red;
	}

	#two{
	position:absolute;
	border:2px solid blue;
	top:0px;
	}

	.new {
	left:100%;
	float:right;
	visibility:hidden;
	}
	<!DOCTYPE html>
	<html>
	<head>
	<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.8/jquery.min.js"></script>
	<meta name="description" content="transition hacking 2" />
	<meta charset=utf-8 />
	<title>JS Bin</title>
	</head>
	<body>
	<button id="toLeft"> Slide Left</button>
	<button id="clear"> Clear Trans</button>
	<button id="toRight">Slide Right</button>
	<div class="container">
	<div id="one" class="layout current">
	<h2>ONE</h2>
	<img src='http://baconmockup.com/300/200'/>
	</div>
	<div id="two" class="layout new">
	<h2>TWO</h2>
	<img src='http://baconmockup.com/300/200'/>

	</div>
	</div>
	</body>
	</html>
	$('#toLeft').on('click', function(){
	var w = $('.container').width();
	$('#two').css('visibility', 'visible');
	$('#one').one('transitionend', function(target){
	console.log('done one trans');
	$('#one').css('-webkit-transition','');
	$('#one').css('-webkit-transform', '');
	$('#one').css('visibility','hidden').css('left','-' + w + 'px');
	});

	$('#two').one('transitionend', function(target){
	console.log('done two trans');
	$('#two').css('left',0);
	$('#two').css('-webkit-transition','');
	$('#two').css('-webkit-transform', '');
	});
	$('.container').css('width');
	$('.layout').css('-webkit-transition','all 0.4s');
	$('.layout').css('-webkit-transform', 'translate3d(-' + w + 'px, 0, 0)');

	});

	$('#toRight').on('click', function(){
	var w = $('.container').width();
	$('#one').css('visibility', 'visible');
	$('#two').one('transitionend', function(target){
	console.log('done two right-trans');
	$('#two').css('-webkit-transition','');
	$('#two').css('-webkit-transform', '');
	$('#two').css('visibility','hidden').css('left','100%');
	});

	$('#one').one('transitionend', function(target){
	console.log('done one right-trans');
	$('#one').css('left',0);
	$('#one').css('-webkit-transition','');
	$('#one').css('-webkit-transform', '');
	});
	$('.container').css('width');
	$('.layout').css('-webkit-transition','all 0.4s');
	$('.layout').css('-webkit-transform', 'translate3d(' + w + 'px, 0, 0)');
	});

	$('#clear').on('click', function(){
	$('.layout').css('-webkit-transform', '');
	});