Анимирую строку поиска с помощью Angular animation и ngIf.
После появления input'а, когда время его входной анимации заканчивается, примененные стили сбрасываются. Почему так происходит и как это исправить? Код примера тут.
Stack Overflow на русском — это сайт вопросов и ответов для программистов. Присоединяйтесь! Регистрация займёт не больше минуты.
Присоединиться к сообществуАнимирую строку поиска с помощью Angular animation и ngIf.
После появления input'а, когда время его входной анимации заканчивается, примененные стили сбрасываются. Почему так происходит и как это исправить? Код примера тут.
Никакие стили не сбрасываются, если вы напишите нативную анимацию через @keyframes
вы получите тот же эффект.
Вы анимируете ширину с 0 до 608, но дефолтная ширина инпута не 608, добавьте свойство width
инпуту, точно также как и с border
'ом, который у вас пропадает, потому что в конечных стилях данного свойства нету:
.search__search-input {
.....,
width: 608px;
border: solid 1px #ebebeb;
}
@keyframes
, анимации в angular немного сложнее, потому что они работают напрямую через js используя апи браузера (setInterval | Promise | setTimeout
)
9 авг 2018 в 6:46