Concurrent enter/leave transitions about animator-css HOT 17 CLOSED

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

from animator-css.

@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.

from animator-css.

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?

from animator-css.

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.

from animator-css.

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?

from animator-css.

@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.

from animator-css.

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

from animator-css.

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

from animator-css.

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

from animator-css.

@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 :(

from animator-css.

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

from animator-css.

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.

from animator-css.

@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?

from animator-css.

@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> )

from animator-css.

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

from animator-css.

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

from animator-css.

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

from animator-css.