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)
    – arturovt
    9 авг 2018 в 6:46

Ваш ответ

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

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