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 · 5 comments

Comments

Projects
None yet
4 participants
@matsko
Member

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

This comment has been minimized.

Show comment
Hide comment
@thesmartwon

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

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

This comment has been minimized.

Show comment
Hide comment
@lokeshdaiya

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

This comment has been minimized.

Show comment
Hide comment
@matsko

matsko Jul 18, 2017

Member

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', []) 
  ]
})
Member

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

This comment has been minimized.

Show comment
Hide comment
@matsko

matsko Jul 18, 2017

Member

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

Member

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

This comment has been minimized.

Show comment
Hide comment
@lokeshdaiya

lokeshdaiya Jul 20, 2017

Thanks @matsko for update.

Thanks @matsko for update.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment