एनिमेट पेज: टर्बोलिंक के साथ बदलें

Question

मैं पृष्ठ को कैसे एनिमेट कर सकता हूं: टर्बोलिंक के साथ बदलें?

क्या यह संभव है?

मैंने शरीर पर एक सीएसएस संक्रमण की कोशिश की लेकिन यह उम्मीद के अनुसार काम नहीं किया। पता नहीं कि खिड़की के केवल एक हिस्से को कैसे अपडेट किया जाए और जब यह हो, तो कॉलबैक बनाया जाए, या यदि यह भी संभव हो।

अग्रिम धन्यवाद

Answer 1

कुछ इस तरह काम कर सकते हैं (CoffeeScript jQuery का उपयोग करने में):

$(document).on 'page:fetch', -> 
    $('#content').fadeOut 'slow' 

$(document).on 'page:restore', -> 
    $('#content').fadeIn 'slow' 

तुम भी सीएसएस एनिमेशन या कुछ और अधिक जटिल जावास्क्रिप्ट इस्तेमाल कर सकते हैं। Here's a great post जो कुछ उदाहरणों और डेमो के साथ गहराई से चला जाता है।

इसके अलावा, मैं turbolink transitions ruby gem (जिसे मैंने परीक्षण नहीं किया है) में आया था।

Answer 2

में आप वास्तव में turbolinks साथ खिड़की का सिर्फ एक हिस्सा अद्यतन नहीं कर सकते, आप के बजाय pjax उपयोग कर सकते हैं। लेकिन आप कुछ मुश्किल चीजें कर सकते हैं ताकि यह दिख सके कि यह टर्बोलिंक्स के साथ पृष्ठ का केवल एक हिस्सा है और इसे अपडेट कर रहा है।

मेरे पास एक इंडेक्स पेज है जो कुछ आइटम सूचीबद्ध करता है, और यदि आप किसी आइटम पर क्लिक करते हैं तो यह शो पेज पर जाता है। लेकिन शो पेज से मैं अभी भी अन्य वस्तुओं के शो पेज पर सीधे नेविगेट करने में सक्षम होना चाहता हूं। इंडेक्स पेज पर आइटमों की सूची छह कॉलम चौड़ी है, और मैं विवरण के लिए जगह बनाने के लिए शो पेज पर संकुचित होने के लिए इसे एनिमेट करता हूं।

// items.css.sass 
.width-trans 
    +transition(width 400ms ease-in) 

तत्व की चौड़ाई में बदलावों को बदलने के लिए एक साधारण सीएसएस वर्ग को परिभाषित करें।

<!-- index.html.erb -> 
<div id="target_div" class="width-trans six columns"> 
    <%= link_to "Item", 
       item_path(@item.id), 
       :'data-no-turbolink' => true, 
       :class => 'trans' %> 
</div> 

हम लिंक हम से परिवर्तित कर रहे हैं पर सच करने के लिए डेटा-नो-turbolink सेट तो हम एक छोटे से अधिक नियंत्रण हो सकता है।

# items.js.coffee 
$(document).on 'page:restore', (e) -> 
    if window.location.href.match(/\/items\/\d$/) || window.location.href.match(/\/items$/) 
    $("#target_div").removeClass("three").addClass("six") 
    else 
    $("#target_div").removeClass("six").addClass("three") 

target_page = undefined # Sorry, this 'target_page' stuff is a little janky. 

if Modernizr.csstransitions 
    eventEndNames = 
    'WebkitTransition': 'webkitTransitionEnd' 
    'MozTransition': 'transitionend' 
    'OTransition':  'oTransitionEnd' 
    'msTransition':  'MSTransitionEnd' 
    'transition':  'transitionend' 

    eventName = eventEndNames[Modernizr.prefixed('transition')] 

    $(document).on eventName, '#target_div',() -> 
    Turbolinks.visit(target_name) if target_page 
    target_page = undefined 

$(document).on 'click', '.trans', (e) -> 
    e.preventDefault() 

    target_name = e.target.href 
    $(e.target).closest("#target_div").toggleClass("three six") 
    false 

ठीक है, यह थोड़ा पागल है और शायद हम इसे करने का एक और सामान्य तरीका समझ सकते हैं। लेकिन यहां क्या चल रहा है इस पर रन-डाउन है:

हमने अपने .trans लिंक पर टर्बोलिंक्स को अक्षम कर दिया है ताकि टर्बोलिंक तुरंत नए पृष्ठ को नहीं लाएंगे (हम इसे लाने के लिए स्पष्ट रूप से टर्बोलिंक्स को बताएंगे)। जब हम एक .trans लिंक पर क्लिक करते हैं तो यह #target_div को देखता है और .six और .three कक्षाओं को टॉगल करता है। मैं फाउंडेशन का उपयोग करता हूं, इसलिए तीन और छः मेरी ग्रिड प्रणाली का हिस्सा हैं और मेरे divs की चौड़ाई को परिभाषित करते हैं .. इसलिए जब मैं छः से तीन में बदलता हूं तो यह चौड़ाई बदलता है।

जो मेरे सीएसएस संक्रमण को ट्रिगर करता है, #target_div चौड़ाई में कम हो जाता है और फिर यह संक्रमण अंत घटना को बंद कर देता है। जब संक्रमण समाप्त होता है तो हम अपने लक्षित यूआरएल पर Turbolinks.visit() को कॉल करते हैं।

#target_div दोनों इंडेक्स और कार्यों को दिखाकर प्रस्तुत किया जाना चाहिए। हमारे पास पृष्ठ को सुनने का हिस्सा है: पुनर्स्थापित करें कि कौन सा क्रिया इसे प्रस्तुत कर रहा है, इसके आधार पर # target_div के कॉलम को छः या तीन सेट करता है।

अंतिम परिणाम #target_div के रूप में हम पृष्ठों बदल रहे हैं चेतन करने के लिए प्रकट होता है, लेकिन वास्तविकता में यह संक्रमण है इससे पहले कि हम पृष्ठों बदल सकते हैं और दोनों पृष्ठों सिर्फ अपनी अलग-अलग राज्यों में एक ही div प्रस्तुत करना।

Answer 3

शायद यह http://turbolinks-transitions.herokuapp.com/ जो आप चाहते थे उसके करीब है। टर्बोलिंक्स के भविष्य के संस्करणों में इस कार्यक्षमता की अपेक्षा करें ... या भविष्य में इसका आविष्कार करके भविष्य को करीब बनाएं, और योगदान दें)