-
-
Save dbouwman/7479807 to your computer and use it in GitHub Desktop.
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| .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; | |
| } | |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| <!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> |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| $('#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', ''); | |
| }); |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment