Dogstudio / highway

Highway - A Modern Javascript Transitions Manager
https://highway.js.org/
MIT License
1.43k stars 92 forks source link

Add contextual transitions to core.redirect, overlapping views work, add contextualTransition example, small fix #43

Closed joshkirk-zero closed 5 years ago

joshkirk-zero commented 5 years ago

The new view is now added as soon as possible and set to visibility: hidden. The old view is removed when the .in transition resolves.

The contextual transition gets set up inside redirect(href, contextual) now, so both clicking a link and using core.redirect(href, transition) can use them. In both cases, pass in false to use the view transition.

I added a quick example and a hunk of JS code to show the core.redirect(href, transition) in action to the top of the examples page.

joshkirk-zero commented 5 years ago

This is melting my mind right now. But everything is good to go, and I changed my contextualTransition example to reflect the way things need to be handled in the transition.

Do note that now it is necessary to use display: none; or similar in the .out transition to manually hide the old view if you don't want overlapping transitions. You noted this in slack as well, so just confirming that.

Also note that if you want overlapping views, in the .in transition you have to hide the old view and show the new view (set visibility to visible), then proceed with your animation, and when everything is complete, fire done() to remove the old view.

This seems like an extra step in the transition code, but in essence it is providing the developer with the option to code their transition however they want and to control when the old and new views are swapped. I'm still open to thoughts here as well.

Anthodpnt commented 5 years ago

@joshkirk-zero I did the merge for the Core.js and Renderer.js manually by checking your commits so I'll close this pull request since your commits are now in the develop branch. I'll run some more tests and check if there are possible improvements :).