16 Temmuz 2018

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>
[codepen_embed height=”265″ theme_id=”0″ slug_hash=”KqqBPQ” default_tab=”css,result” user=”evrenakar”]See the Pen Css Animasyonunun display:none Durumunda Çalışmama Problemi! by Evren (@evrenakar) on CodePen.[/codepen_embed]

Bir Frontendci

Frontendci.com, sektörde çalışan ve gelecekte bu sektörde çalışmak isteyen tüm frontend geliştiriciler için türkçe html, css ve javascript eğitim, anlatım kaynaklarını derlemek amacıyla kurulmuştur. Türkçe eğitim videoları, anlatımlar, makaleler ve sunumların toplandığı bir mecradır.

Tüm içerikleri göster

Yorum yap

Bir Cevap Yazın