Chuyển tiếp trang di động jQuery CSS3 mà không cần thư viện di động jQuery

Question

Tôi có một ứng dụng dành cho thiết bị di động được tạo bằng HTML/JS (jQuery)/CSS và tôi đang tìm cách bao gồm các chuyển đổi trang bắt chước các trang được tìm thấy trong jQuery Mobile (cụ thể là chuyển đổi lật) mà không cần phải bao gồm toàn bộ khung công tác jQuery Mobile.

Các hoạt ảnh này dường như là các chuyển đổi CSS3 được gắn với trình kích hoạt jQuery nhưng tôi không biết bắt đầu từ đâu. Có ai có ý tưởng nào?

Bất kỳ trợ giúp nào sẽ được đánh giá rất nhiều!

Answer 1

Tải xuống phiên bản không được rút gọn của tệp CSS cho jQuery Mobile và sao chép các lớp cho các chuyển đổi cụ thể mà bạn muốn.

CSS có thể được tìm thấy ở đây: http://code.jquery.com/mobile/1.0rc2/jquery.mobile-1.0rc2.css

Và mã cho quá trình chuyển đổi bắt đầu từ dòng 1270. Nếu bạn sao chép-out tất cả các lớp CSS cho quá trình chuyển đổi, nó chỉ về 6KB thông tin.

Dưới đây là một số mã ví dụ từ file CSS ở trên:

.viewport-flip { 
    -webkit-perspective: 1000; 
    position: absolute; 
} 

.ui-mobile-viewport-transitioning, 
.ui-mobile-viewport-transitioning .ui-page { 
    width: 100%; 
    height: 100%; 
    overflow: hidden; 
} 

.flip { 
    -webkit-animation-duration: .65s; 
    -webkit-backface-visibility:hidden; 
    -webkit-transform:translateX(0); /* Needed to work around an iOS 3.1 bug that causes listview thumbs to disappear when -webkit-visibility:hidden is used. */ 
} 

.flip.out { 
    -webkit-transform: rotateY(-180deg) scale(.8); 
    -webkit-animation-name: flipouttoleft; 
} 

.flip.in { 
    -webkit-transform: rotateY(0) scale(1); 
    -webkit-animation-name: flipinfromleft; 
} 

Vì vậy, để lật trong một yếu tố bạn sẽ thêm lớp .flip và lớp .in, và flip-out một yếu tố bạn sẽ thêm lớp .flip và lớp học .out.

Ngoài ra jQuery CSS chỉ bao gồm -webkit- tiền tố nhưng nếu bạn muốn hỗ trợ nhiều trình duyệt bạn có thể thêm tiền tố khác như: -moz-, -o- vv

Answer 2

Bạn có thể nhìn vào chỉ là thư viện chuyển trang như tôi biết jQM được tách widget như của Beta RC2:

• http://jquerymobile.com/blog/2011/08/03/jquery-mobile-beta-2-released
• http://github.com/jquery/jquery-mobile/tree/master/js

Answer 3

Kiểm tra 'Chuyển tiếp trang không phải Jquery nhẹ' bằng fasw.

Demo đây: http://www.fasw.ws/demos/transitions1/slide1.html

Và nguồn ở đây: http://www.fasw.ws/faswwp/non-jquery-page-transitions-lightweight/

Đây là 1.7K của JS sản xuất hiệu ứng chuyển tiếp mà cũng giống như những người sản xuất bởi toàn bộ điện thoại di động jQuery Lib.