Css Animasyonunun “display:none” Durumunda Çalışmama Problemi!

Css Animasyonunun “display:none” Durumunda Çalışmama Problemi! Üzerine gelince görünen ve hover efektinde animasyon verdiğiniz divler her zaman sorun yaratır. En temel sorun üzerine geldiğinizde düzgün bir şekilde efekti uygulayan div üzerinden mouseunuzu çektiğinizde pat diye yok olur. Efektiniz gelirken uygulanır ama giderken uygulanmaz. Bunun çok kolay bir çözümü var,

Öncelikle yanlış çalışan örneği yapalım;

.parent {
  background-color: #000;
  color: #fff;
  width: 500px;
  height: 500px;
  padding: 5px;
}
.myDiv {
  display: none;
  opacity: 0;
  padding: 5px;
  color: #600;
  background-color: #cec;
}
.parent:hover .myDiv {
  display: block;
  opacity: 1;
  /* "both" tells the browser to use the above opacity
  at the end of the animation (best practice) */
  -webkit-animation: display-none-transition 1s both;
  animation: display-none-transition 1s both;
}
@-webkit-keyframes display-none-transition {
  0% {
    opacity: 0;
  }
}
@keyframes display-none-transition {
  0% {
    opacity: 0;
  }
}
<div class="parent">
  Hover on me...
  <div class="myDiv">Hello!</div>
</div>

Yukarıdaki kodda göreceğiniz gibi mouse ile üzerine geldiğinizde yavaşça gelen div üzerinden çekildiğinizde birden kaybolacaktır.

Doğrusu;

.parent {
  background-color: #000;
  color: #fff;
  width: 500px;
  height: 500px;
  padding: 5px;
}
.myDiv {
  opacity: 0;
  padding: 5px;
  color: #600;
  background-color: #cec;
  -webkit-transition: opacity 1s;
  transition: opacity 1s;
}
.parent:hover .myDiv {
  opacity: 1;
}
<div class="parent">
  Hover on me...
  <div class="myDiv">Hello!</div>
</div>

 

See the Pen Css Animasyonunun display:none Durumunda Çalışmama Problemi! by Evren (@evrenakar) on CodePen.0

 
Facebook Yorumları
Admin

Lead FrontEnd Developer, React – Node.js – Html – Css Blogger, Geology Engineer, Gamer, Foosball Player, A True Car Enthusiast..

Yorum yapmak ister misin?