Mobile Jquery - Flip Effect

Question

Vui lòng tìm URL bên dưới.

http://jquerymobile.com/demos/1.1.0/docs/pages/page-transitions.html

Làm thế nào tôi có thể sử dụng những hiệu ứng này trên trang onload hoặc trên document.onReady ??

Answer 1

Việc tạo lại chuyển đổi lật từ jQuery Mobile trên trang chuẩn khá đơn giản. Bắt đầu bằng cách tạo ra một container hoàn toàn có vị trí với hai đứa trẻ tương đối vị trí mà sẽ là hai trang bạn đang lật giữa. Khi bạn đã tải cả hai trang, hãy áp dụng các lớp 'lật' và 'thoát' cho trang được thay thế và gọi hide() trên đó. Cuối cùng, thêm các lớp 'lật' và 'trong' vào trang đang được hiển thị và gọi show() trên đó.

Chuyển tiếp chỉ là chuyển đổi CSS3 vì vậy hãy lưu ý rằng chúng sẽ không hoạt động trên tất cả các trình duyệt và chúng hoạt động kém trên màn hình lớn/máy hiệu suất thấp.

HTML

<button type="button" id="go">FLIP</button> 
<div class="container"> 
    <div class="page1"> 
     Lorem ipsum dolor sit amet, consectetur adipiscing elit. 
    </div> 
    <div class="page2"> 
     Duis interdum, odio vel condimentum varius, nibh nunc ultrices velit. 
    </div> 
</div> 

CSS

.container { 
    position: absolute; 
    -webkit-perspective: 1000; 
    -moz-perspective: 1000; 
} 
.page1 { 
    width: 300px; 
    height: 300px; 
    background: red; 
    position: relative; 
} 
.page2 { 
    width: 300px; 
    height: 300px; 
    background: blue; 
    position: relative; 
    display: none; 
} 

.flip { 
    -webkit-backface-visibility:hidden; 
    -webkit-transform:translateX(0); 
    -moz-backface-visibility:hidden; 
    -moz-transform:translateX(0); 
} 
.flip.out { 
    -webkit-transform: rotateY(-90deg) scale(.9); 
    -webkit-animation-name: flipouttoleft; 
    -webkit-animation-duration: 175ms; 
    -moz-transform: rotateY(-90deg) scale(.9); 
    -moz-animation-name: flipouttoleft; 
    -moz-animation-duration: 175ms; 
} 
.flip.in { 
    -webkit-animation-name: flipintoright; 
    -webkit-animation-duration: 225ms; 
    -moz-animation-name: flipintoright; 
    -moz-animation-duration: 225ms; 
} 
.flip.out.reverse { 
    -webkit-transform: rotateY(90deg) scale(.9); 
    -webkit-animation-name: flipouttoright; 
    -moz-transform: rotateY(90deg) scale(.9); 
    -moz-animation-name: flipouttoright; 
} 
.flip.in.reverse { 
    -webkit-animation-name: flipintoleft; 
    -moz-animation-name: flipintoleft; 
} 
@-webkit-keyframes flipouttoleft { 
    from { -webkit-transform: rotateY(0); } 
    to { -webkit-transform: rotateY(-90deg) scale(.9); } 
} 
@-moz-keyframes flipouttoleft { 
    from { -moz-transform: rotateY(0); } 
    to { -moz-transform: rotateY(-90deg) scale(.9); } 
} 
@-webkit-keyframes flipouttoright { 
    from { -webkit-transform: rotateY(0) ; } 
    to { -webkit-transform: rotateY(90deg) scale(.9); } 
} 
@-moz-keyframes flipouttoright { 
    from { -moz-transform: rotateY(0); } 
    to { -moz-transform: rotateY(90deg) scale(.9); } 
} 
@-webkit-keyframes flipintoleft { 
    from { -webkit-transform: rotateY(-90deg) scale(.9); } 
    to { -webkit-transform: rotateY(0); } 
} 
@-moz-keyframes flipintoleft { 
    from { -moz-transform: rotateY(-90deg) scale(.9); } 
    to { -moz-transform: rotateY(0); } 
} 
@-webkit-keyframes flipintoright { 
    from { -webkit-transform: rotateY(90deg) scale(.9); } 
    to { -webkit-transform: rotateY(0); } 
} 
@-moz-keyframes flipintoright { 
    from { -moz-transform: rotateY(90deg) scale(.9); } 
    to { -moz-transform: rotateY(0); } 
} 

Javascript

Bạn sẽ cần phải thay thế phần này với một cái gì đó phù hợp hơn với trang của bạn, nhưng khái niệm này sẽ giống nhau.

$('#go').click(function() { 
    var page1 = $('.page1'); 
    var page2 = $('.page2'); 
    var toHide = page1.is(':visible') ? page1 : page2 ; 
    var toShow = page2.is(':visible') ? page1 : page2 ; 

    toHide.removeClass('flip in').addClass('flip out').hide(); 
    toShow.removeClass('flip out').addClass('flip in').show(); 
}); 

Đây là một bản demo làm việc: http://jsfiddle.net/lakario/VPjX9/