Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

No direct way to disable animation children #16483

Closed
matsko opened this issue May 2, 2017 · 6 comments
Closed

No direct way to disable animation children #16483

matsko opened this issue May 2, 2017 · 6 comments

Comments

@matsko
Copy link
Member

@matsko matsko commented May 2, 2017

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
Copy link

@thesmartwon thesmartwon commented Jun 16, 2017

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...

matsko added a commit to matsko/angular that referenced this issue Jul 5, 2017
matsko added a commit to matsko/angular that referenced this issue Jul 5, 2017
matsko added a commit to matsko/angular that referenced this issue Jul 5, 2017
matsko added a commit to matsko/angular that referenced this issue Jul 6, 2017
matsko added a commit to matsko/angular that referenced this issue Jul 6, 2017
matsko added a commit to matsko/angular that referenced this issue Jul 7, 2017
matsko added a commit to matsko/angular that referenced this issue Jul 7, 2017
matsko added a commit to matsko/angular that referenced this issue Jul 7, 2017
matsko added a commit to matsko/angular that referenced this issue Jul 7, 2017
@jasonaden jasonaden closed this in 8e28382 Jul 7, 2017
@lokeshdaiya
Copy link

@lokeshdaiya lokeshdaiya commented Jul 18, 2017

@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
Copy link
Member Author

@matsko matsko commented Jul 18, 2017

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
Copy link
Member Author

@matsko matsko commented Jul 18, 2017

@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
Copy link

@lokeshdaiya lokeshdaiya commented Jul 20, 2017

Thanks @matsko for update.

@angular-automatic-lock-bot
Copy link

@angular-automatic-lock-bot angular-automatic-lock-bot bot commented Sep 12, 2019

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.

@angular-automatic-lock-bot angular-automatic-lock-bot bot locked and limited conversation to collaborators Sep 12, 2019
Sign up for free to subscribe to this conversation on GitHub. Already have an account? Sign in.
Projects
None yet
Linked pull requests

Successfully merging a pull request may close this issue.

None yet
4 participants
You can’t perform that action at this time.