Page slider for page conversion on mobile phone

Do you often see "transfer" on your mobile phone? Page conversion on your mobile phone is not like page Jump on the pc. Many of them use animations to smoothly switch between pages.

So how can we convert between pages? The first thing to note is that switching between pages is actually switching between elements in a single page. As shown in, the center area in the middle is the current area in the viewport, that is, what we can see, while the two sides are the areas that we can't see but are always on standby. The idea of switching is simple: it is to use the animation effect of CSS to switch between the left and right elements so that users can only see the content in the visible area in the middle. So the idea is: (1) Place the part that needs to be switched to the visible area at the starting position of the animation (2) use the CSS3 animation to start sliding (3) slide to the specified position. Of course, in implementation, enabling hardware acceleration using CSS3's translate3d can improve the page performance, that is, a little power consumption. The CSS code is as follows:

.page{     position:absolute;     left:0;     top:0;     width:100%;     height:100%;    -webkit-transform: translate3d(0,0,0);     transform:translate3d(0,0,0);}.page.left{     -webkit-transform: translate3d(-100%,0,0);     transform:translate3d(-100%,0,0);}.page.right{     -webkit-transform: translate3d(100%,0,0);     transform:translate3d(100%,0,0);}.page.center{     -webkit-transform: translate3d(0,0,0);     transform: translate3d(0,0,0)}.page.transition{     -webkit-transition-duration: 0.25s;     transition-duration:.25s;}

　　

OK, the animation effect is good, and the next step is to use JavaScript to turn the scene. // Set the start position of the right element to rightPage. className = "page right"; // The right element moves to the center, and the middle element moves to the left rightPage. className = "page transtion center"; centerPage. className = "page transtion left"; of course, page conversion is complicated in actual operations. For example, after you click an area, the page may be moved, rather than the whole page. When you move some data, you only need. page. the-100% in the left is changed to the required size, for example,-50%, that is, moving half to the left to make a common sliding half of the page. Benefits:For page switching, pageSlider. js is a micro-page Switching Module: callback. This is a microjs ideal for single-page app switching.