ngAnimate to allow sync animations

[karellm]

When it comes to animations, it is common to need to either have several animations start at the same time or one after each other. That goes for ngAnimate. Right now, it triggers both enter and leave (in the case of ngView) at the same time.

We can use a timeout on the enter to wait for the leave to finish but that's clearly quite buggy and not ideal.

I think it would be nice to add a configuration in the ngAnimate to tell the animator if we want the leave to trigger the enter automatically when it's done. Something like:

<div ng-view ng-animate="{enter: anim1, leave: anim2, sync: true}"></div>

What do you think? Is that the way you'd implement it?

[matsko]

You can sync animations easily by setting a delay in CSS (using animation-delay or transition-delay) where the value of that is the same of the duration of the former animation. Using JS animations, just compound a delay timeout with the timeout of the animation.

[karellm]

As I said on yearofmoo, the timeout will trigger even on the first enter animation (when the page load). In this case there is no leave animation to wait for, so the timeout gets in the way.

Playing with timeouts here feels hacky and unprecise. It should really act as a callback imo.

[matsko]

You're right yes. Right now there is no way to get around this in CSS animations. With JS you can examine the scope and look for a property to figure out the delay:

https://github.com/yearofmoo-articles/AngularJS-Second-Animation-Article/blob/master/app/scripts/animations.js#L65

[kevin-smets]

@matsko how do you use that to extract the timeout? Maybe I'm missing something but wouldn't it be 'easier' to get element.css('transition-duration') or element.css('animation-duration') and use a reg exp to extract the numeric value?

I'd love this to daisy chain animations.

[matsko]

Getting the animation value already happens inside of $animator (and it uses something similar to what you're suggesting). I was more so using $window.setTimeout to show how to test and capture setTimeout duration values.

Still working on a way to daisy chain animations together. Please wait until 1.2 to see how animations work (since they're changed) and we can all think of a way how to sync up animations.

[matsko]

Lots of animation things have changed. Still interested in brainstorming about this?

[karellm]

I played with the new animations (js) and wasn't convinced. Playing with timeout still feels hacky to me and the lack of callbacks is disappointing. But to be honest, I don't use Angular all that much anymore.

I guess it gets awesome once you get your way around it but I've never been that frustrated about a framework - except with wordpress maybe... It sounds great on the paper but even stupidly simple things are a pain in the ass to get to work. Too obscure and magic maybe for my kind a coding :)

Thanks for the follow up though! I guess you can close the issue now.

[cniaulin]

Same issue here.
on a ngSwitch animation, the "enter animation" doesn't wait for the "done callback" of the "leave animation".
Does someone has a workaround while waiting for improvements of this feature ?

Thanks !

[kevin-smets]

@cniaulin if I'm not mistaken, this is exactly the point of the new animations. The leaving part gets cloned and animated at the same time the new content enters. This way you can animate them both at the same time. E.g. currently I'm animating ng-view leave as a slide-away and the enter as an upscale (something like the "scale down pusher" here -> http://tympanus.net/Development/SidebarTransitions/)

Otherwise you'd only have one part of the content to animate. Now you can choose between daisy chaining (waiting for the callback, but that means getting the proper timing down) or animating both the entering and leaving content at the same time. This makes for many more possibilities.

[cniaulin]

Yes after playing a while with animations, it would be bad to sync leave and enter animations by default. However, it would be great to have options or an easy way to sync leave and enter animations.
Typically when you juste want a simple animation with ngswitch for instance. At first, you would probably expect animations to be sync I guess.
Anyway, definitely not a bug here but maybe a nice feature to add !

[kevin-smets]

Agreed with that :).An easy toggle option would be nice.

[kevin-smets]

Will this still be picked up? I like the idea of cloning the content to make the animation async, but this means the content loses it's scrolling position (and it's children if any are scrollable). The side effect of this is that all content jumps up just before the animation starts (e.g. scroll in an ng-view, then animate the route change).

[matsko]

I would like to still talk about this, but it won't make it for the 1.2 release. The issue is having a clean API without interfering with the template code to place animation logic in there.

Content cloning is always a bad idea and you would really break the layout when you're cloning IDs and videos.

[Siyfion]

@matsko Further to this discussion, could we at least ensure that the "entering" view is added below the "leaving" view in the DOM, so that elements don't go flying around all over the place when you're trying to do a fadeIn/fadeOut?

[calebkiage]

Well, an idea could be to use a transition delay on the enter animation and then use ngClass that removes the delay on the first enter animation. I haven't yet tried it so I don't really know if it would work.

[matsko]

Still unsure about how this would work with the current API. Any brainstorming about this would be helpful. Otherwise I think that syncing animations can be done using delays in CSS and callbacks in JavaScript.

[matsko]

No idea right now of how to design the API for this. 1.3 won't really have a different API so this may be a feature that may come in for 2.0. Closing this for now since there's nothing happening.

[Danetag]

... So did someone solve this issue? I would like to sync enter and leave animations without using a delay (I'm using JS animations so a setTimeout) but at least the done callbacks (events would have been great too!). I'm using Angular v1.4.7. How can I sync them? Thanks!