Why are styles reset after animation in Angular?

Question

Angular

Animating the search bar with Angular animation and ngIf.
After an input appears, when its input animation times out, the applied styles are reset. Why is this happening and how to fix it?
Sample code here: https://stackblitz.com/edit/angular-3ug5j7?file=ap...

Answer 1

You've specified the state to transition to instead of styling the element itself properly. Either enter the applied width directly in the css, or specify it as a wildcard. Should it be something like this ?

Answer 2

Specify width: '*' for the animation result. And in css set the desired width.

trigger('fadeInOut', [
      transition(':enter', [style({
        width: '59px',
        border: 'none',
      }),
        animate(3000, style({
          width: '*',
          border: 'solid 1px #ebebeb',
        }))],
      ),
      transition(':leave', [
        animate(3000, style({
          width: '59px',
          border: 'none',
        }))],
      ),
    ])