Css'te display:none verdiğimiz nesneye transition nasıl verilir?

Merhabalar,
Arkadaşlar bir divi gizliyorum display none ile. X divinin üzerine geldiğinde gizlediğim div display block oluyor. Fakat transition yemiyor. Display none ile gizlediğim divi opacity:0; visibility:hidden ile gizleyip X divin üzerine geldiğinde visibility:visible; opacity 1 yapınca transition yiyor fakat elimi divin üstünden çektiğimde sorunlarla karşılaşıyorum. Hani o gizlenen div hala orda kalıyor. Umarım ne demek istediğimi anlamışsınızdır

display: none bir transition değeri değildir. Opacity veya scale edip, daha sonrasında display: none ile ortadan kaldırabilirsiniz. Ancak display: none ile animasyon veremezsiniz.

Hocam soruyu mu yanlış sordum acaba? Display:none verilen obje X divinin üzerine gelince transition ile yani animasyonlu şekilde gelsin. X divinden elimi çektiğimde de animasyonlu şekilde kaybolmasını istiyorum. Bu display:none ile mümkün değil fakat birkaç firmanın sitesine baktım. Display none verdiği bir divde transition özellikleri var. Ben beceremiyorum.

jQuery ile yapabilirsiniz https://api.jquery.com/fadeout/

Aynı kapıya çıkıyor. Olay şu şekilde: display:none veriliyor ama transition değerleri var. Üzerine geldiğinde display: block halini alır ama transition değerleri değişir. Transition ile başka değerleri değiştiriyorlar. Default'ta display: none ve transition değerleri vardır. Üzerine geldiğinde display: block alır ve diğer transition değerleri animasyon sağlar.

Merhaba 👋
Güzel bir gün geçirdiğinizi umuyorum.
Bu isteğinizi birkaç kod yardımıyla css ve javascript kullanarak yapmanız mümkün.
Aşağıdaki kod örneğini kendinize göre düzenleyerek sonuca ulaşabilirsiniz.

#dividburayagirin {
  display: none;
  transition: all 0.8s ease-in-out;
}

const dividburayagirin = document.querySelector("#dividburayagirin");

dividburayagirin.addEventListener("mouseover", function() {
  dividburayagirin.style.display = "block";
});

dividburayagirin.addEventListener("mouseout", function() {
  dividburayagirin.style.display = "none";
});

Mutlu günler dilerim

Deneyip döneceğim hocam. Çok teşekkürler.