No direct way to disable animation children

[matsko]

Up to this point there has been a big effort to refactor the animation code and make it runtime compatible and to introduce new features such as query, variables and router animations. There is, however, no support for disabling animations on a DOM-structure level.

Here is what is in mind for doing this:

<!-- disable animations here and for its children -->
<div [@$disabled]="bool">...</div>

<!-- issue a callback when ANY animation event occurs -->
<div (@$all)="callback($event)">...</div>

<!-- issue a callback when any start animation event occurs -->
<div (@$all.start)="onStart($event)">...</div>

<!-- issue a callback when any done animation event occurs -->
<div (@$all.done)="onDone($event)">...</div>

[thesmartwon]

Being able to disable animations for an element and all its children would be amazing! Is there an easy way to do this in the meantime until this is released? Currently I have to add an extra transition to each element I want disable animations on that resets back to a normal state in 0ms...

[lokeshdaiya]

@matsko
Its not working....throwing error in browser console "ERROR Error: Found the synthetic property @.disabled. Please include either "BrowserAnimationsModule" or "NoopAnimationsModule" in your application.
"
Here is sample plnkr https://plnkr.co/edit/uOASzz.

[matsko]

Yes sorry there was a bug that this PR (#18064) intended to fix, but it failed to make the release. It will show up in this week's release.

In the meantime, to get around the error, just add an empty animation to the component that contains the @.disabled in the template. So something like this:

@Component({
  animations: [
    trigger('removeThisWhen301isOut', []) 
  ]
})

[matsko]

@lokeshdaiya 5344be5 has fixed the issue and is now in master. The release for it should pop up within the next couple of days.

[lokeshdaiya]

Thanks @matsko for update.

[angular-automatic-lock-bot]

This issue has been automatically locked due to inactivity.
Please file a new issue if you are encountering a similar or related problem.

Read more about our automatic conversation locking policy.

_{This action has been performed automatically by a bot.}