Skip to content
This repository was archived by the owner on Jul 28, 2018. It is now read-only.

Keeping old page in the DOM until new page is loaded #516

Open
Stafie opened this issue May 1, 2015 · 4 comments
Open

Keeping old page in the DOM until new page is loaded #516

Stafie opened this issue May 1, 2015 · 4 comments
Labels
feature request

Comments

@Stafie
Copy link

Stafie commented May 1, 2015

Been playing with page transitions here and i was wondering if it would be possible to keep the current page in the DOM until we have the new page fully loaded.

This would allow me to keep the transitionOut tied to the transitionIn animation and will make the experience smoother. Let me know if this is possible and i'm missing something. Thanks!
@Thibaut
Copy link
Collaborator

Thibaut commented May 3, 2015

I'm not sure what you mean. We only unload the current page after we've received the new page, by replacing the <body> element in the DOM. The replacement is done with a single atomic operation — there is no remove/add.

If you mean loading the scripts &co of the new page before replacing it, that's not possible because we'd have to load the new body in a different context (iframe) than the current DOM (of which there is only one), which would break all kinds of things.

Which events are you binding to for your transition?

@Stafie
Copy link
Author

Stafie commented May 4, 2015

Hi @Thibaut, thanks for trying to help!

Sorry if i was unclear earlier. Currently i'm using:

$(document).on 'page:fetch', ->
  //transitions for page out

$(document).on 'page:load', ->
  //transitions for page in

But the animations are chained, meaning that they occur one after another. What i'm looking for is to animate the pages simultaneously. Here's a good example of a transition i'm trying to achieve:
https://www.dropbox.com/s/1bjhjpuy8i8py8p/transitions.mp4?dl=0

I think this would be possible if there was a way to insert a different .page-wrapper element instead of <body/> and keep both .page-wrapper elements in the DOM until the transitions for page-in are done.

Do you think this would be possible to achieve or I'm rambling nonsense? ;)

@Thibaut
Copy link
Collaborator

Thibaut commented May 4, 2015

Hi @Stafie

I don't think it's possible to achieve such a transition with the current Turbolinks. You might get a slightly better transition by hooking into page:before-unload (fires when the new body has been received and the existing one is about to be replaced) instead of page:fetch (before the XHR), but since we don't keep both bodies in the DOM you'll get a "flash" when the body is replaced.

To make this work we would need a callback that lets you override the default replaceChild with a function that keeps both elements in the DOM (see #288), plus as you said the ability to scope Turbolinks to a container, since AFAIK it's not possible to keep two <body> in the DOM.

I like the second idea (Turbolinks container), less so the first one (overriding replacement). I'll give this more thought in the coming weeks and see if we can make it work. I agree it'd be nice for Turbolinks to support page transitions like that.

@Stafie
Copy link
Author

Stafie commented May 4, 2015

Great, thanks again for taking the time to explain this to me and even considering it as a new feature!

Sign up for free to subscribe to this conversation on GitHub. Already have an account? Sign in.
Assignees
No one assigned
Labels
feature request
Projects
None yet
Milestone
No milestone
Development

No branches or pull requests
2 participants
@Thibaut @Stafie