Skip to content
This repository was archived by the owner on Apr 12, 2024. It is now read-only.
This repository was archived by the owner on Apr 12, 2024. It is now read-only.

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

Open
@OlenDavis

Description

@OlenDavis

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.

Metadata

Metadata

Assignees

No one assigned

    Type

    No type

    Projects

    No projects

    Relationships

    None yet

    Development

    No branches or pull requests

    Issue actions