jQuery मोबाइल CSS3 लाइब्रेरी के बिना jQuery मोबाइल CSS3 पृष्ठ संक्रमण

Question

मेरे पास HTML/JS (jQuery)/CSS का उपयोग करके बनाया गया एक मोबाइल ऐप है और मैं पेज संक्रमणों को शामिल करना चाहता हूं जो jQuery मोबाइल में पाए गए नकल की नकल करते हैं (विशिष्ट फ्लिप संक्रमण में) पूरे jQuery मोबाइल फ्रेमवर्क को शामिल करने की आवश्यकता के बिना।

ये एनिमेशन jQuery ट्रिगर से जुड़े CSS3 संक्रमण होने लगते हैं लेकिन मुझे नहीं पता कि कहां से शुरू करना है। क्या किसी के पास कोई विचार है?

किसी भी मदद की सराहना की जाएगी!

Answer 1

jQuery मोबाइल के लिए सीएसएस फ़ाइल के गैर-मिनीफाइड संस्करण को डाउनलोड करें और विशिष्ट संक्रमणों के लिए कक्षाएं कॉपी करें।

सीएसएस यहां पाया जा सकता: http://code.jquery.com/mobile/1.0rc2/jquery.mobile-1.0rc2.css

और बदलाव के लिए कोड लाइन 1270 पर शुरू होता है आप कॉपी-आउट सीएसएस वर्गों के सभी बदलाव के लिए, तो वह केवल जानकारी के 6kb बारे में है।

.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; 
} 

तो फ्लिप-इन करने के एक तत्व आप .flip वर्ग और .in वर्ग जोड़ना होगा, और फ्लिप बाहर करने के लिए एक तत्व आप जोड़ना होगा:

यहाँ ऊपर सीएसएस फ़ाइल से कुछ उदाहरण कोड है .flip वर्ग और .out कक्षा।

इसके अलावा jQuery सीएसएस केवल -webkit- उपसर्गों शामिल है, लेकिन आप जैसे अन्य उपसर्गों जोड़ सकते हैं आप अधिक ब्राउज़रों का समर्थन करना चाहते हैं: -moz-, -o-, आदि

Answer 2

तुम बस पृष्ठ संक्रमण पुस्तकालय में दिखाई दे सकता है के रूप में मैं jQM पता बीटा RC2 के रूप में विगेट्स decoupling है:

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

Answer 3

fasw द्वारा 'गैर-jquery पेज संक्रमण लाइटवेट' देखें।

यहाँ डेमो: यहां http://www.fasw.ws/demos/transitions1/slide1.html

और स्रोत: http://www.fasw.ws/faswwp/non-jquery-page-transitions-lightweight/

यह जे एस संक्रमण है कि बस पूरे मोबाइल jQuery लिब द्वारा उत्पादित की तरह हैं का निर्माण करने में 1.7k है।