v2.5.2
Giriş yap

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>

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.

tayfunerbilen
1315 gün önce yazdı - 1706 kez görüntülendi.
Önceki CSS ile Yazılara Kontur Ekleme Sonraki CSS ile Hamburger Menu Yapımı