Как добавить анимацию для раскрывающего поиска?

Question

[kaidos]

У меня есть раскрывающий поиск. Анимация происходит только первый раз и то только когда раскрывается, мне нужно чтобы в итоге анимация происходила при раскрытии и закрытии инпута.
Пробовал создавать класс, добавлять к нему transition: width .3s ease;, и в JS его добавлял через $('.class').addClass('.class');
Мой код:

Comments

[Сергей Сергей]

Убрал класс, ушёл транзишн.

Answer 1

[Radiks Alijevs]

Нужно убрать добавление свойства display: none

let searchValid = false;

$('.search__icons').click(function() {
    if(searchValid == false){
      $('.search__icons').css('background', '#F8F8F8');
      $('.search__input').css('display', 'block');
      $('.search__input').css('width', '515px');
      $('.search__icons').css('border-radius', '3px 0 0 3px');
      $('.search__input').addClass('search__input--anim');
      $('.contact__number').css('display', 'none');
      searchValid = true;
    } else {
      $('.search__icons').css('background', '#F9E8FA');
      //$('.search__input').css('display', 'none'); - из-за этого не срабатывает анимация
      $('.search__input').css('width', '0');
      $('.search__input').css('padding', '0');
      $('.search__icons').css('border-radius', '3px');
      $('.search__input').addClass('search__input--anim');
      $('.contact__number').css('display', 'block');
      searchValid = false;
    }
    
});