How to add animation for dropdown search?

Question

css

I have an expanding search. The animation occurs only the first time, and then only when it opens, I need the animation to eventually occur when the input is opened and closed.
I tried to create a class, add to it transition: width .3s ease;, and added it to JS through $('.class').addClass('.class');
My code:

Answer 1

You need to remove the addition of the property 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;
    }
    
});