Concurrent enter/leave transitions

[jus101]

Am wondering if it would be possible to do concurrent transitions between the outgoing and incoming views?

Basically, the outgoing view is animated out while at the same time the incoming view is animated in.

Typically, if navigating down a hierarchy of views, the parent would slide out to the left, while the target child would slide in from the right.

[EisenbergEffect]

@zewa666 Can you look into this? It's an important scenario to cover.

[zewa666]

@jus101 sure that works out of the box. If you look at the css classes for the section in the navigation app example https://github.com/aurelia/skeleton-navigation/blob/master/styles/styles.css#L49-L52, all you'd have to do is define the same one for the section.au-leave-active class and add your animations in there.

[jus101]

Hmm - I think that's what I have tried, but what I see is the outgoing view animate out; the router-vew slot is then replaced with the incoming view, which is then animated in.

I'm guessing that to get the desired effect, both views would need to remain in the DOM until both of their animations are complete?

[zewa666]

oh ok ... sry didn't get that you'd really like to have both of them "at the same time". hmm yeah that one could be a bit tricky, as you mentioned they'd need to be both present in DOM in order to work.

[jus101]

Yeah, sorry - I did a quick search and found this example:
http://cases.azoft.com/iphonestyle-web-page-transitions-angularjs-css-demo/#/

So maybe, a question for @EisenbergEffect as to where to go with this - might require changes deeper into the other framework components?

[EisenbergEffect]

@zewa666 This is why the router-view specifically uses the ViewSlot.swap method. I believe an update to that implementation, in terms of how it interacts with the animation abstraction, is needed to fully enable this. Not that this is also how the compose element works. So, fixing the ViewSlot.swap and corresponding animation apis, will solve both cases.

[jus101]

I came across this a few days ago https://github.com/Rich-Harris/ramjet
Was wondering if animator-css could take a similar approach - i.e.

1. Clone the outgoing au-animate element
2. Dispose of the real outgoing element
3. Start the leave animation on the clone
4. Append incoming au-animate element
5. Start the enter animation on the incoming element
6. Dispose of clone element once leave animation is complete

[akircher]

+1 on concurrent swaps. I want my website to look like a prezi :)

[davismj]

I'm running into the same issue. If you want me to take a look at this, please point me in the right direction.

[zewa666]

@davismj yes please, help would be greatly appreciated. Essentially what we need is that at one moment in time both pages, the old and the new one, are together in the DOM and respect the animators promises before disappearing. This has to be done in the ViewSlot's swap method. https://github.com/aurelia/templating/blob/master/src/view-slot.js#L178

It sounds like a small change, but whatever I tried failed sadly :(

[tomsean]

anyone who have implement this effect when page change like http://cases.azoft.com/iphonestyle-web-page-transitions-angularjs-css-demo/#/

[EisenbergEffect]

This is supported now in the router-view and we'll add it to the compose element as well. See the latest release blog post for more information.

[reisandbeans]

@EisenbergEffect I'm new to Aurelia and I'm looking on how to add such effect to my app, but I was unable to found the blog post you mentioned above. Can you please provide me the link to it or to any other guide on how to achieve simultaneous outgoing/ingoing animations?

[dev-zb]

@Tinadim I believe it's http://blog.durandal.io/2015/11/10/aurelia-pre-beta-release/
Search for swap-order. (<router-view swap-order=""></router-view> )

[EisenbergEffect]

@joelcox Can you describe that briefely for @z-brooks ?

[dev-zb]

@EisenbergEffect did I link the wrong blog post 😖? @Tinadim was asking which blog post you meant in the earlier comment.

[EisenbergEffect]

swap-order is what you want. Probably with a value of with
That's the correct post.