0

Анимирую строку поиска с помощью Angular animation и ngIf.

После появления input'а, когда время его входной анимации заканчивается, примененные стили сбрасываются. Почему так происходит и как это исправить? Код примера тут.

1 ответ 1

1

Никакие стили не сбрасываются, если вы напишите нативную анимацию через @keyframes вы получите тот же эффект.

Вы анимируете ширину с 0 до 608, но дефолтная ширина инпута не 608, добавьте свойство width инпуту, точно также как и с border'ом, который у вас пропадает, потому что в конечных стилях данного свойства нету:

.search__search-input {
    .....,
    width: 608px;
    border: solid 1px #ebebeb;
}
2
  • А почему не применились стили, которые я задал в анимации? Они же вроде бы по окончанию времени анимации должны применится к стилям объекта...?
    – Drovosek
    9 авг 2018 в 6:44
  • 1
    @ЕгорСпириади, нет, анимация это "эдакой" сахар, который существует на протяжении какого-то времени, попробуйте проделать тоже самое без angular с @keyframes, анимации в angular немного сложнее, потому что они работают напрямую через js используя апи браузера (setInterval | Promise | setTimeout) 9 авг 2018 в 6:46

Ваш ответ

By clicking “Отправить ответ”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.

Всё ещё ищете ответ? Посмотрите другие вопросы с метками или задайте свой вопрос.