Почему сбрасываются стили после анимации в Angular?

Question

[Drovosek01]

Анимирую строку поиска с помощью Angular animation и ngIf.
После появления input'а, когда время его входной анимации заканчивается, примененные стили сбрасываются. Почему так происходит и как это исправить?
Код примера тут: https://stackblitz.com/edit/angular-3ug5j7?file=ap...

Answer 1

[0xD34F]

Вы указали состояние к которому осуществляется переход, вместо того, чтобы стилизовать должным образом сам элемент. Либо впишите применяемую ширину непосредственно в css, либо укажите её в качестве подстановочной. Должно было получится что-то вроде этого?

Comments

[Drovosek01]

Да, так и задумывалось, спасибо.
Подскажите, пожалуйста, что это за состояние "*"? И почему после входной анимации вы удалили стили в animate()? Вроде же к ним и должен "приходить" объект.

[0xD34F]

Drovosek01, состояние - так называемое подстановочное, соответствует любому состоянию. Стили удалены, потому что они избыточны - переход и так будет осуществлён к указанным в "*". В общем - изучайте документацию.

Answer 2

[Дмитрий Лузанов]

Укажите width: '*' для результата анимации. А в css задайте желаемый 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',
        }))],
      ),
    ])

Comments

[Drovosek01]

Хм... это работает.
Но разве стили, которые заданы в первой transition в методе animate(), разве они не должны применится к стилям объекта по окончании анимации?

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