Arama kutusu animasyonu

Merhabalar Arama kutusu iconuna tıkladığımda animasyon çalışıyor.Fakat kapatma iconuna tıkladığımda animasyon ile kapanmıyor sebebi ne olabilir?

Arama Kutusu: https://codepen.io/ahmet04300595/pen/bGjePLm

Animasyonlu kapatmak için
transition: all .5s ease;

Hocam nereye ekleyeceğim? Ben denedim olmadı.

Tikladiginiz alanın kapsayicisina ve kapanan alanın kapsayicisina

Animasyonlu kapatma için farklı bir CSS animation yazmalısın. İlkinin aksine opacity değeri 1'den 0'a inmeli. İkinci hata ise animasyonun ardından display:none kullanman. Bunu kullandığında animasyon kullanımı gözardı edilip div'in otomatikman anında gizleniyor.

CSS kısmına şunu ekle:

.search-container.passive{animation: popupKapat .5s linear;}

/* Animasyonlu Kapatma */
@-webkit-keyframes popupKapat {from {top:0; opacity: 1;} to {top:0px; opacity:0;}}
@keyframes popupKapat {from {top:0; opacity: 1;} to {top:0px; opacity:0;}}

javascripti ise şu şekilde değiştir:

const searchInput = document.querySelector(".search-icon");
const searchContainer = document.querySelector(".search-container");
const searchCloseBtn = document.querySelector(".search-close-btn");

searchInput.addEventListener("click", () => {
searchContainer.classList.add("active");
searchContainer.classList.remove("passive");
searchCloseBtn.style.display = "block";
});

searchCloseBtn.addEventListener("click", () => {

searchContainer.classList.add("passive");

setTimeout(function(){
searchContainer.classList.remove("active");
searchCloseBtn.style.display = "none";
}, 500)

searchInput.value = "";
});

Örnek çalışan sayfa