Created
August 20, 2013 16:29
-
-
Save lancevo/6283812 to your computer and use it in GitHub Desktop.
solved transition flickering when transition to the top of 2nd page. Both panels are positioned absolute, and using translate3d to move the panel. Each panel has its own overflow setting, so it doesn't impact other panel.
Padding-bottom is added to the parent panel (#panels), so it'll hide the toolbars (tested on iOS 6, may not work on iOS 7)
This file contains hidden or 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> | |
| <meta name="viewport" content="width=device-width, user-scalable=no initial-scale=1.0"> | |
| <script src="http://code.jquery.com/jquery-1.10.1.min.js"></script> | |
| <style> | |
| html, body { | |
| height: 100%; | |
| } | |
| body { | |
| overflow: hidden; | |
| margin: 0; | |
| } | |
| #panels { | |
| /*width: 320px; | |
| height: 480px;*/ | |
| width:100%; | |
| height:100%; | |
| overflow: hidden; | |
| position:relative; | |
| /* padding to have ios browser hide the toolbar */ | |
| padding-bottom:80px; | |
| } | |
| .panel { | |
| width: 100%; | |
| height: 100%; | |
| position: absolute; | |
| top: 0; | |
| overflow: auto; | |
| background: #fff; | |
| -webkit-overflow-scrolling: touch; | |
| /* padding-bottom:80px;*/ | |
| } | |
| .animate { | |
| background: #ccc; | |
| } | |
| .animate .panel { | |
| -webkit-transition: all 0.3s ease-out; | |
| -moz-transition: all 0.3s ease-out; | |
| -o-transition: all 0.3s ease-out; | |
| transition: all 0.3s ease-out; | |
| } | |
| .panel ~ .panel { | |
| z-index: 100; | |
| } | |
| </style> | |
| </head> | |
| <body> | |
| <div id="panels" class=""> | |
| <div id="panel1" class="panel"> | |
| <button class="menu-btn">Close</button> | |
| <ol> | |
| <li> Item </li> | |
| <li> Item </li> | |
| <li> Item </li> | |
| <li> Item </li> | |
| <li> Item </li> | |
| <li> Item </li> | |
| <li> Item </li> | |
| <li> Item </li> | |
| <li> Item </li> | |
| <li> Item </li> | |
| <li> Item </li> | |
| <li> Item </li> | |
| <li> Item </li> | |
| <li> Item </li> | |
| <li> Item </li> | |
| <li> Item </li> | |
| <li> Item </li> | |
| <li> Item </li> | |
| <li> Item </li> | |
| <li> Item </li> | |
| <li> Item </li> | |
| <li> Item </li> | |
| <li> Item </li> | |
| <li> Item </li> | |
| <li> Item </li> | |
| <li> Item </li> | |
| <li> Item </li> | |
| <li> Item </li> | |
| <li> Item </li> | |
| <li> Item </li> | |
| <li> Item </li> | |
| <li> Item </li> | |
| <li> Item </li> | |
| <li> Item </li> | |
| <li> Item </li> | |
| <li> Item </li> | |
| <li> Item </li> | |
| <li> Item </li> | |
| <li> Item </li> | |
| <li> Item </li> | |
| <li> Item </li> | |
| <li> Item </li> | |
| <li> Item </li> | |
| <li> Item </li> | |
| <li> Item </li> | |
| <li> Item </li> | |
| <li> Item </li> | |
| <li> Item </li> | |
| <li> <button class="menu-btn">Close</button> | |
| </li> | |
| <li> Item </li> | |
| <li> Item </li> | |
| <li> Item </li> | |
| <li> Item </li> | |
| <li> Item </li> | |
| <li> Item </li> | |
| <li> Item </li> | |
| <li> Item </li> | |
| <li> Item </li> | |
| <li> Item </li> | |
| <li> Item </li> | |
| <li> Item </li> | |
| <li> Item </li> | |
| <li> Item </li> | |
| <li> Item </li> | |
| <li> Item </li> | |
| <li> Item </li> | |
| <li> Item </li> | |
| <li> Item </li> | |
| <li> Item </li> | |
| <li> Item </li> | |
| <li> Item </li> | |
| <li> Item </li> | |
| <li> Item </li> | |
| <li> Item </li> | |
| </ol> | |
| ** END ** | |
| <button class="menu-btn">Close</button> | |
| </div> | |
| <div class="panel" id="panel2"> | |
| <button class="menu-btn">Menu</button> | |
| *** BEGIN *** | |
| <p>Ball tip cow ad nisi pig, culpa cillum in. Chuck pastrami ex, ham hock ut pariatur non jerky tri-tip aliquip venison et sirloin anim. Pig frankfurter brisket fugiat incididunt. Consequat pastrami beef ribs, minim esse et pork belly adipisicing magna corned beef labore prosciutto sirloin dolor. Corned beef elit ham, hamburger ullamco aliqua strip steak est quis culpa meatloaf duis labore in consequat. Non qui rump shank beef. Nisi kielbasa labore, commodo drumstick short loin filet mignon adipisicing magna aliqua veniam deserunt pork belly turkey.</p><p>Ham ullamco bresaola brisket anim tri-tip swine pancetta. Corned beef sed pig aliqua ribeye chicken capicola sirloin occaecat irure veniam esse. Magna sed in, chuck et do fugiat. Est incididunt ad bacon pastrami eiusmod brisket magna veniam elit ea ham. Et pork chop ad in veniam strip steak commodo tongue sunt in. Bresaola irure ullamco sausage nostrud voluptate, jowl meatloaf commodo ex ham. Eiusmod drumstick ea, jerky exercitation consectetur ham hock dolore.</p><p>Boudin velit esse pork loin. Qui jowl in voluptate. Biltong et capicola, aliqua ham hock jerky irure ea voluptate dolor magna elit occaecat. Tempor venison ut, pariatur commodo adipisicing salami jerky ball tip tail brisket aliquip filet mignon chicken. Nostrud labore reprehenderit short ribs enim. Eu dolore quis shoulder ea pork chop sed drumstick consequat nostrud et enim boudin sint. Kielbasa salami in ground round adipisicing prosciutto.</p><p>Pork loin chuck proident brisket shank duis. Dolore tenderloin aliquip rump. Velit irure swine pork belly short loin. In bresaola turducken, ex duis anim drumstick ham hock id pariatur sirloin minim pastrami tail. Venison kielbasa minim velit bacon chuck pig capicola eiusmod et commodo.</p> | |
| <p>Ball tip cow ad nisi pig, culpa cillum in. Chuck pastrami ex, ham hock ut pariatur non jerky tri-tip aliquip venison et sirloin anim. Pig frankfurter brisket fugiat incididunt. Consequat pastrami beef ribs, minim esse et pork belly adipisicing magna corned beef labore prosciutto sirloin dolor. Corned beef elit ham, hamburger ullamco aliqua strip steak est quis culpa meatloaf duis labore in consequat. Non qui rump shank beef. Nisi kielbasa labore, commodo drumstick short loin filet mignon adipisicing magna aliqua veniam deserunt pork belly turkey.</p><p>Ham ullamco bresaola brisket anim tri-tip swine pancetta. Corned beef sed pig aliqua ribeye chicken capicola sirloin occaecat irure veniam esse. Magna sed in, chuck et do fugiat. Est incididunt ad bacon pastrami eiusmod brisket magna veniam elit ea ham. Et pork chop ad in veniam strip steak commodo tongue sunt in. Bresaola irure ullamco sausage nostrud voluptate, jowl meatloaf commodo ex ham. Eiusmod drumstick ea, jerky exercitation consectetur ham hock dolore.</p><p>Boudin velit esse pork loin. Qui jowl in voluptate. Biltong et capicola, aliqua ham hock jerky irure ea voluptate dolor magna elit occaecat. Tempor venison ut, pariatur commodo adipisicing salami jerky ball tip tail brisket aliquip filet mignon chicken. Nostrud labore reprehenderit short ribs enim. Eu dolore quis shoulder ea pork chop sed drumstick consequat nostrud et enim boudin sint. Kielbasa salami in ground round adipisicing prosciutto.</p><p>Pork loin chuck proident brisket shank duis. Dolore tenderloin aliquip rump. Velit irure swine pork belly short loin. In bresaola turducken, ex duis anim drumstick ham hock id pariatur sirloin minim pastrami tail. Venison kielbasa minim velit bacon chuck pig capicola eiusmod et commodo.</p> | |
| <p>Ball tip cow ad nisi pig, culpa cillum in. Chuck pastrami ex, ham hock ut pariatur non jerky tri-tip aliquip venison et sirloin anim. Pig frankfurter brisket fugiat incididunt. Consequat pastrami beef ribs, minim esse et pork belly adipisicing magna corned beef labore prosciutto sirloin dolor. Corned beef elit ham, hamburger ullamco aliqua strip steak est quis culpa meatloaf duis labore in consequat. Non qui rump shank beef. Nisi kielbasa labore, commodo drumstick short loin filet mignon adipisicing magna aliqua veniam deserunt pork belly turkey.</p><p>Ham ullamco bresaola brisket anim tri-tip swine pancetta. Corned beef sed pig aliqua ribeye chicken capicola sirloin occaecat irure veniam esse. Magna sed in, chuck et do fugiat. Est incididunt ad bacon pastrami eiusmod brisket magna veniam elit ea ham. Et pork chop ad in veniam strip steak commodo tongue sunt in. Bresaola irure ullamco sausage nostrud voluptate, jowl meatloaf commodo ex ham. Eiusmod drumstick ea, jerky exercitation consectetur ham hock dolore.</p><p>Boudin velit esse pork loin. Qui jowl in voluptate. Biltong et capicola, aliqua ham hock jerky irure ea voluptate dolor magna elit occaecat. Tempor venison ut, pariatur commodo adipisicing salami jerky ball tip tail brisket aliquip filet mignon chicken. Nostrud labore reprehenderit short ribs enim. Eu dolore quis shoulder ea pork chop sed drumstick consequat nostrud et enim boudin sint. Kielbasa salami in ground round adipisicing prosciutto.</p><p>Pork loin chuck proident brisket shank duis. Dolore tenderloin aliquip rump. Velit irure swine pork belly short loin. In bresaola turducken, ex duis anim drumstick ham hock id pariatur sirloin minim pastrami tail. Venison kielbasa minim velit bacon chuck pig capicola eiusmod et commodo.</p> | |
| *** THE END *** | |
| </div> | |
| </div> | |
| <script> | |
| function SLIDER() { | |
| var csstemp = '<style id="panelsTemp"></style>', | |
| width = $('body').width(); | |
| $("#panels").append(csstemp); | |
| function genCSS(){ | |
| var css = '#panel2 { -webkit-transform: translate3d(' + width + 'px, 0, 0); -moz-transform: translate3d(' + width + 'px, 0, 0); -ms-transform: translate3d(' + width + 'px, 0, 0); -o-transform: translate3d(' + width + 'px, 0, 0);transform: translate3d(' + width + 'px, 0, 0); }' + | |
| '.panelLeft #panel2 { -webkit-transform: translate3d(0, 0, 0);-moz-transform: translate3d(0, 0, 0);-ms-transform: translate3d(0, 0, 0);-o-transform: translate3d(0, 0, 0);transform: translate3d(0, 0, 0);} '; | |
| return css; | |
| } | |
| $('#panelsTemp').text( genCSS() ); | |
| $("#panels").addClass('animate'); | |
| $("button").on('click', function(e){ | |
| //$(".panel").scrollTop(0); | |
| $("#panels").toggleClass("panelLeft"); | |
| }); | |
| } | |
| $().ready(function(){ | |
| window.scrollTo(0,1); | |
| setTimeout(function(){ | |
| SLIDER(); | |
| },50) | |
| }) | |
| </script> | |
| </body> | |
| </html> |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment