Here’s an example: JS Bin
I didn’t hook it up to routing, but that shouldn’t be a huge issue if you understand how this example works. (Let me know if I’m wrong about this).
The important things to notice:
The elements are absolutely positioned
Th login / signup pages are absolutely positioned, this helps prevent collisions during the animations. You can likely work around this, but it’s tricky. Let me know if this is a problem.
It keeps both elements in the page until all animations are complete
shouldDisplay to make sure both pages are rendered until the animations have completed.
It works by using
.login() is called, it updates the properties in a batch:
this.oldPage = this.page;
this.page = "login"
This makes it so computes will not re-evaluate until both
page have been set.
Once this batch is done, the page will be updated, we need to make sure the
<div class='login'> element is in the page before we dispatch the
<div> is listening to these events with:
This calls the animation helper:
We do something similar if the signup page is being shown:
Probably the trickiest part is to remove the
<div> from the page once the leaving animation has completed. To do this we can listen to animation end:
animationend fires for both the
slideIn and the
slideOut. This is why we only actually removeOldPage if we are the old page.