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-class on html tag kills animation after triggering #4231

Closed
@meeroslav

Description

@meeroslav

When adding conditional classes with on html tag (with ng-class), setting it off for the first time kills all the animations on page as it removes animate state from html tag.

You can see example here: http://plnkr.co/edit/nbganjCblEL4Oj2hm6Y5

If you click on 2nd link animation would be toggled endlessly. Clicking on first link runs the animation only first time. All subsequent clicks will not animate.

I've investigated this and realized that during the animation, performAnimation checks for parent.inheritedData(NG_ANUMATE_STATE) which translates eventually to $(html).data('$$ngAnimateState'). If successfull, adds animateState to element animated and after animation was done removes it. When using ng-class on HTML tag,
animate state is add and removed from html tag.
As a result:

parent.inheritedData(NG_ANIMATE_STATE) || disabledAnimation).running

is always true after that point, thus bailing out of all the subsequent animations.

Metadata

Metadata

Assignees

Labels

Type

No type

Projects

No projects

Relationships

None yet

Development

No branches or pull requests

Issue actions