Repository: angular
Issue: Add will-change property to elements that are animated
Labels: type: bug/fix,area: animations,freq2: medium,P4

<!--🔅🔅🔅🔅🔅🔅🔅🔅🔅🔅🔅🔅🔅🔅🔅🔅🔅🔅🔅🔅🔅🔅🔅🔅🔅🔅🔅🔅🔅🔅🔅

Oh hi there! 😄

To expedite issue processing please search open and closed issues before submitting a new one.
Existing issues often contain information about workarounds, resolution, or progress updates.

🔅🔅🔅🔅🔅🔅🔅🔅🔅🔅🔅🔅🔅🔅🔅🔅🔅🔅🔅🔅🔅🔅🔅🔅🔅🔅🔅🔅🔅🔅🔅🔅🔅-->


# 🐞 bug report

### Affected Package
<!-- Can you pin-point one or more @angular/* packages as the source of the bug? -->
<!-- ✍️edit: --> The issue is caused by package @angular/animations


### Is this a regression?

<!-- Did this behavior use to work in the previous version? -->
<!-- ✍️--> No


### Description

When element is animated, the additional styles are removed after the animation ends.
This might cause issues because some of the properties might change behavior of inner elements.
For example, animating using `transform` might cause to make the element a containing block, which might affect how position fixed elements inside are displayed.
Then, when the animation is not in progress, the elements stops being a containing block.
This can affect libraries like popper.js which uses position fixed to display tooltips (see example below).

I think Angular should add will-change properties to element when animation is not in progress. a) it will hint the browser that the element will change and b) it will solve the problem with transform and position fixed, as will-change: transform will also create containing block.

## 🔬 Minimal Reproduction
<!--
Please create and share minimal reproduction of the issue starting with this template: https://stackblitz.com/edit/angular-issue-repro2-kdbpfx
-->
https://stackblitz.com/edit/angular-issue-repro2-kdbpfx
<!--
If StackBlitz is not suitable for reproduction of your issue, please create a minimal GitHub repository with the reproduction of the issue.
A good way to make a minimal reproduction is to create a new app via `ng new repro-app` and add the minimum possible code to show the problem. 
Share the link to the repo below along with step-by-step instructions to reproduce the problem, as well as expected and actual behavior.

Issues that don't have enough info and can't be reproduced will be closed.

You can read more about issue submission guidelines here: https://github.com/angular/angular/blob/master/CONTRIBUTING.md#-submitting-an-issue
-->

## 🔥 Exception or Error
<pre><code>
<!-- If the issue is accompanied by an exception or an error, please share it below: -->
<!-- ✍️-->

</code></pre>


## 🌍  Your Environment

**Angular Version:**
<pre><code>
ngular CLI: 8.3.8
Node: 10.9.0
OS: win32 x64
Angular: 8.2.9
... animations, common, compiler, compiler-cli, core, forms
... language-service, platform-browser, platform-browser-dynamic
... router

Package                            Version
------------------------------------------------------------
@angular-devkit/architect          0.803.8
@angular-devkit/build-angular      0.803.8
@angular-devkit/build-ng-packagr   0.803.8
@angular-devkit/build-optimizer    0.803.8
@angular-devkit/build-webpack      0.803.8
@angular-devkit/core               8.3.8
@angular-devkit/schematics         8.3.8
@angular/cli                       8.3.8
@ngtools/webpack                   8.3.8
@schematics/angular                8.3.8
@schematics/update                 0.803.8
ng-packagr                         5.5.1
rxjs                               6.5.3
typescript                         3.5.3
webpack                            4.39.2

</code></pre>

**Anything else relevant?**
<!-- ✍️Is this a browser specific issue? If so, please specify the browser and version. -->

<!-- ✍️Do any of these matter: operating system, IDE, package manager, HTTP server, ...? If so, please mention it below. -->