Binding are not refresh when an animation is done

[haia212]

I'm submitting a ... (check one with "x")

[x] bug report => search github for a similar issue or PR before submitting
[ ] feature request
[ ] support request => Please do not submit support request here, instead see https://github.com/angular/angular/blob/master/CONTRIBUTING.md#question

Current behavior

I am using an animation in a component. When my animation is done, I call a function (using (@opacity.done)="animationCloseDone($event)" where opacity is the name of my animation trigger). This function updates a component variable that is bind in the corresponding template.

In my component :

animationCloseDone($event) {
    if ($event.fromState === 'open' && $event.toState === 'close') {
      this.isOpened = false;
    }
  }

In my template :

<div  [ngStyle]="{ display: isOpened ? 'block' : 'none' }">
...
</div>

The problem is that at the end of my animation, even if my variable isOpened is changed to false, the view is not updated (i.e the ngStyle does not apply the display:none).

Expected behavior
The binding should be updated and the ngStyle should be applied (my div should have a display:none).

Minimal reproduction of the problem with instructions
Here is the plunkr reproducing the bug :
https://plnkr.co/edit/6DuwHIjFI3ovH0LHxvEB?p=preview

In the plunkr, I use a popin example. To reproduce the bug, you need to click on the show popin link which opens the popin and then click anywhere (on the overlay) to close it. As you can see, the closing animation is correctly trigger (and the opacity of my overlay goes back to 0). After the closing animation, the variable isOpened is updated to false in the animationCloseDone callback. This should apply a display:none to the overlay but in my case it doesn't. To illustrate this behavior, you can put the cursor hover the link and see that the css on a:hover is not applied (because the overlay is still here).
More, if you click another time on the remaining (but not visible because opacity is 0) overlay, the binding is refreshed and the overlay goes away.

What is the motivation / use case for changing the behavior?
As mentioned above in my popin example, you can't interact with the interface behind the overlay even if this overlay is not visible.

Please tell us about your environment:
Browser : Google Chrome
OS : Mac OS 10.11.6

[ericmartinezr]

Most likely because animations callbacks are running outside angular's zone, see #11881

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