Why reset styles after animating in Angular?

[Drovosek01]

I'm submitting a...

[ ] Regression (a behavior that used to work and stopped working in a new release)
[ ] Bug report  
[ ] Performance issue
[ ] Feature request
[x] Documentation issue or request
[ ] Support request => Please do not submit support request here, instead see https://github.com/angular/angular/blob/master/CONTRIBUTING.md#question
[ ] Other... Please describe:

Current behavior

The Input field appears and stretches during the animation time, and then the styles that were applied during the animation time are removed (the width and border of the input element become standard, not the ones I specified in the "style({})" object

Expected behavior

The input box will appear and stretch to 608 pixels wide and will remain in this position until I click on the closing cross.

Minimal reproduction of the problem with instructions

https://stackblitz.com/edit/angular-3ug5j7?file=app%2Fexample.component.ts

What is the motivation / use case for changing the behavior?

I animate the search bar using Angular animation and ngIf. After the input field appears, when its input animation ends, the applied styles are reset (the width becomes standard and the border disappears). Why is this happening and how to fix it?

Environment

Angular version: 6.0.0


Browser:
- [x] Chrome (desktop) version 68.0.3440.84
- [ ] Chrome (Android) version XX
- [ ] Chrome (iOS) version XX
- [ ] Firefox version XX
- [ ] Safari (desktop) version XX
- [ ] Safari (iOS) version XX
- [ ] IE version XX
- [ ] Edge version XX
 
For Tooling issues:
- Node version: v8.11.3  
- Platform:  Windows 10 64bit

Others:

[manklu]

Have a look at the documentation: https://angular.io/guide/animations

Especially the difference between states and transitions.