search

angular / angular.js

AngularJS - HTML enhanced for web apps!
https://angularjs.org
MIT License
58.85k stars 27.52k forks source link

ng-animate 1.5.8 - ng-animate-ref - Broken under js-based structural animations #15052

Open OlenDavis opened 8 years ago

OlenDavis commented 8 years ago

What is the current behavior? I'm sorry if animation anchoring isn't expected to work when using $animateCss via a javascript-based Angular animation, but it doesn't seem to. As you can see in this hopefully sufficiently minimal demo here, the anchor animation of the element inside the wiped ng-repeat works with the less flexible, pure-CSS wipe animation on the ng-repeat above it, but doesn't when you check the checkbox swapping the animation to the more exact javascript-based wipe animation.

What is the expected behavior? I expected the anchor animation to work equivalently under pure-CSS animations (via ng-enter/leave/move via ng-if/ng-repeat/ng-view/etc) as well as it would when simply using $animateCss from within a js-based animation. But perhaps this was never expected behavior, in which case all that's needed is a caveat in the documentation.

What is the motivation / use case for changing the behavior? Until CSS can animate between say 0px and auto, js-based animations will continue to be the only way to achieve certain kinds of precision. To that end, it'd be great to be able to depend on ng-animate-ref even under these technically "custom" structural animations.

Which versions of Angular, and which browser / OS are affected by this issue? Did this work in previous versions of Angular? Please also test with the latest stable and snapshot (https://code.angularjs.org/snapshot/) versions. I've tried versions back to 1.5.3 and up to and including the snapshot (the provided plunk is using the snapshot).

Other information (e.g. stacktraces, related issues, suggestions how to fix) It must have to do with the obviously large difference between how the runners are handled when calling $animate.enter(...) versus calling $animateCss($element, { event: 'enter', structural: true, ... }).start(), namely that the runners in the first case are waiting till the post digest and having their animations grouped, finding anchors and so on.

OlenDavis commented 8 years ago

Anybody there? Is this expected behavior?

Narretz commented 8 years ago

I haven't looked in detail into it, but I think it technically should work because the JS animation is consumed by the general animation process. The problem must be that animateCss is used inside it.

gkalpak commented 8 years ago

From a quick (and superficial) look, it seems that anchoring is applied only to animations that are run through the $animateQueue, but $animateCss/$animateJs do not go through the $animateQueue.