CSS Transition Problemi ve Çözümü | 𝗣𝗥𝗢𝗧𝗢𝗧𝗨𝗥𝗞

CSS'de Transition Problemi ve Çözümü

CSS'de etiketlere transition özelliği uyguladığınızda ve sayfayı yenilediğinizde sayfa yüklenirken bu özellikler animasyonlu şekilde işlemini bitiriyor ve ilk yüklenişte kötü bir görüntü olmasını sağlıyor.

Bu problemi çözmek içinse şöyle bir yola gidilebilir, <body> etiketinize preload adında bir class ekleyin.

<body class="preload">

..

</body>

Editörde Görüntüle

Ve css dosyanızda preload altındaki tüm özelliklerin transition özelliğini pasifleştirin.

.preload * {
  -webkit-transition: none !important;
  -moz-transition: none !important;
  -ms-transition: none !important;
  -o-transition: none !important;
}

Son olarakta ister jquery ile isterseniz vanillajs ile sayfa hazır olduğunda bu sınıfı kaldırın.

// jquery örneği
$(window).load(() => {
  $("body").removeClass('preload');
});

// vanillajs örneği
window.addEventListener('load', (event) => {
  document.body.classList.remove('preload');
});

Artık böyle bir probleminiz kalmıyor, kolay gelsin.