स्वैप-ऑर्डर = "साथ"

के साथ ऑरेलिया राउटर व्यू एनीमेशन राउटर दृश्यों को एनिमेट करने के लिए मैं ऑरेलिया-एनिमेटर-सीएसएस का उपयोग कर रहा हूं। नए राउटर व्यू पर नेविगेशन पर, मैं चाहता हूं कि मौजूदा दृश्य स्क्रीन से बाईं ओर स्लाइड करें, जबकि नया दृश्य दाईं ओर स्क्रीन पर स्लाइड हो।स्वैप-ऑर्डर = "साथ"

यहाँ मेरी रूटर-व्यू तत्व है:

<router-view swap-order="with"></router-view>

यहाँ विचारों में से प्रत्येक में शीर्ष तत्व है:

<div class="pages au-animate">

और यहाँ सीएसएस है:

@keyframes slideLeftIn { 
    0% { 
    transform: translate(100%, 0); 
    } 
    100% { 
    transform: translate(0, 0); 
    } 
} 
@keyframes slideLeftOut { 
    0% { 
    transform: translate(0, 0); 
    } 
    100% { 
    transform: translate(-100%, 0); 
    } 
} 
.pages.au-enter { 
    transform: translate(100%, 0); 
} 
.pages.au-enter-active { 
    animation: slideLeftIn 0.6s; 
} 
.pages.au-leave-active { 
    animation: slideLeftOut 0.6s; 
}

मैं autoprefix का उपयोग कर रहा हूँ er, इसलिए "webkit-" जैसे उपसर्गों की कोई आवश्यकता नहीं है।

swap-order="with" के साथ, वर्तमान दृश्य बाईं ओर स्क्रीन को स्लाइड करता है, और फिर नया दृश्य स्लाइडिंग के बिना दिखाई देता है।

वही बात swap-order="before" के साथ होती है।

youtube screen videoswap-order="with" के साथ यहां youtube screen video है।

swap-order="after" के साथ, वर्तमान दृश्य बाईं ओर स्क्रीन को स्लाइड करता है, और फिर नया दृश्य दाईं ओर से स्लाइड करता है।

यहां youtube screen videoswap-order="after" के साथ है।

मुझे लगता है कि swap-order="with" इस स्थिति में आवश्यक एक होगा। लेकिन swap-order="after" मुझे जो चाहिए वह सबसे नज़दीक है, क्योंकि दोनों विचार वास्तव में स्लाइड्स करते हैं, बस एक साथ नहीं।

स्रोत

2016-08-23 Jeff G

मैंने स्वैप-ऑर्डर = "साथ" के साथ क्या होता है यह देखने के लिए .pages.au-enter-active एनीमेशन अवधि 0.6 से 1.6 तक बदल दी है। यह वर्तमान दृश्य स्क्रीन से पूरी तरह बंद होने के बाद ही दाएं से स्लाइड करने वाला नया दृश्य दिखाता है। नया दृश्य आंशिक रूप से पहले दिखाया गया है और फिर यह अपेक्षा के अनुसार स्लाइड करता है। तो ऐसा लगता है कि जब तक डीओएम से वर्तमान दृश्य हटा दिया जाता है तब तक नया दृश्य अदृश्य होता है। तो अब मैं सोच रहा हूं कि इस मुद्दे में मेरे सीएसएस के साथ कुछ करना है, लेकिन मुझे यकीन नहीं है कि यह क्या हो सकता है। कोई सुझाव? –

एक साधारण प्रोजेक्ट का प्रयास किया और यह ठीक से काम करता है, इसलिए मुझे यकीन है कि इसे .pages के लिए अन्य सीएसएस के साथ कुछ करना है। –

ऐसा लगता है कि मैं सिर्फ अपनी .pages वर्ग के लिए निम्न शैलियों को जोड़ने के लिए की जरूरत:

.pages { 
    position: absolute; 
    left: 0px; 
    top: $navBarHeight; /* using sass var for the height of my navbar */ 
}

अब सब कुछ उम्मीद के रूप में काम करता है।

स्रोत

2016-08-24 14:13:36

क्या मैं पूछ सकता हूं कि क्या उपयोगकर्ता कभी एनीमेशन को उलट देता है जब उपयोगकर्ता बैक-बटन हिट करता है, और यदि ऐसा है, तो कैसे? – powerbuoy

@powerbuoy थोड़ा देर हो चुकी है, लेकिन वैसे भी। आप दो नए निर्देश बना सकते हैं जहां आप 'ट्रांसफॉर्म' को "उलटा" करते हैं। फिर पीछे की ओर नेविगेट करते समय एक वर्ग लागू करें ताकि आप विपरीत एनिमेशन का उपयोग कर सकें। – scheien

@scheien मुझे एनीमेशन को कैसे उलटा करना है, इस बारे में एक बहुत अच्छा विचार है, मेरी समस्या जो पीछे की ओर नेविगेशन का पता लगा रही है। यहां और अधिक जानकारी: https://github.com/aurelia/router/issues/436 – powerbuoy

नोट: यह प्रश्न का उत्तर नहीं है, लेकिन स्वीकार्य उत्तर में @powerbouy से एनीमेशन शैली और प्रश्न के अतिरिक्त।

आप दो और एनिमेशन की आवश्यकता होगी, जो दिशा उलट:

अगर कोई यहाँ आया, जैसा कि मैंने किया था, एक तरह से एक फोन शैली नेविगेशन के लिए की तलाश में।

@keyframes slideRightIn { 
    0% { 
    transform: translate(-100%, 0); 
    } 
    100% { 
    transform: translate(0, 0); 
    } 
} 
@keyframes slideRightOut { 
    0% { 
    transform: translate(0, 0); 
    } 
    100% { 
    transform: translate(100%, 0); 
    } 
}

तो फिर तुम एनीमेशन कक्षाओं का एक नया सेट की आवश्यकता होगी:

.slide-right .pages.au-enter { 
    transform: translate(-100%, 0); 
} 
.slide-right .pages.au-enter-active { 
    animation: slideRightIn 0.4s; 
} 
.slide-right .pages.au-leave-active { 
    animation: slideRightOut 0.4s; 
}

सही पीछे की ओर नेविगेशन शैली के लिए छोड़ दिया उपयोग करने के लिए, आपको .pages की अपनी एक पेरेंट तत्व को slide-right वर्ग को लागू करने की आवश्यकता होगी

back() { 
     document.querySelector('router-view').classList.add('slide-right'); 
     window.history.back(-1); 
    }

आप एक back() विधि की तरह में router-view तत्व पर इसे संलग्न कर सकता है

फिर detach() ईवेंट पर, आप इसे हटा दें।

detached() { 
    // remove class after animation. Only opt-in for showing "back" style animation. 
    document.querySelector('router-view').classList.remove('slide-right'); 
}

अद्यतन:

भी पता लगाने के लिए ब्राउज़र के उपयोग वापस बटन, आप popstate घटना का दोहन कर सकते हैं। PLATFORM ऑब्जेक्ट ऑरेलिया पाल पैकेज से आता है।

backEventHandler =() => { this.back(true); };

घटना श्रोता जब घटक जुड़ा हुआ है जोड़ें::

एक eventhandler जोड़ें

attached() { 
     PLATFORM.global.addEventListener("popstate", this.backEventHandler); 
    }

घटना श्रोता निकालें घटक अलग है:

detached() { 
     // remove class after animation. Only opt-in for showing "back" style animation. 
     document.querySelector('router-view').classList.remove('slide-right'); 

     PLATFORM.global.removeEventListener("popstate", this.backEventHandler); 
    }

अद्यतन back() कार्य करने के लिए यह बताए जाने के लिए पैरामीटर भी शामिल करें कि इसे ब्राउज़र ओ से कहा जाता है या नहीं आर नहीं

back(native?: boolean) { 
     document.querySelector('router-view').classList.add('slide-right'); 

     if (!native) { 
      window.history.back(-1); 
     } 
    }

स्रोत

2016-12-23 08:36:13 scheien

यह आपकी स्वयं की 'बैक()' विधि का उपयोग करते समय ठीक काम करता है, लेकिन जब उपयोगकर्ता बैक बटन पर क्लिक नहीं करता है। मैं विश्वसनीय रूप से पीछे की ओर नेविगेशन के _all_ प्रकारों का पता लगाने का एक तरीका ढूंढ रहा हूं। – powerbuoy

आप जिथब मुद्दे में उल्लिखित 'पॉपस्टेट' ईवेंट में टैप कर सकते हैं। – scheien

नहीं, वह परवाह किए बिना आग लगती है – powerbuoy

स्वैप-ऑर्डर = "साथ"

उत्तर

संबंधित मुद्दे