Sayfa yüklenirken çirkin duran transition’ları engellemek – aycan.net

Merhaba arkadaşlar,

Artık yaptığımız işlerde transition kullanıyoruz, bazı elementleri rotate yapıyoruz veya kaydırma işlemlerinde kullanıyoruz.

Bu efekt sayfa yüklenirken aynı işlemi yapıyor ve kötü görüntü oluşturuyor.

Örnek :

Bunu engellemek için body’ye bir class veriyoruz

<body class="preload">

1	<body class="preload">

CSS’e aşağıdaki kodu ekliyoruz

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

.preload * {

-webkit-transition: none !important;

-moz-transition: none !important;

-ms-transition: none !important;

-o-transition: none !important;

transition: none !important;

}

Şimdi sitedeki tüm transition’ları iptal etmiş olduk. Şimdi sayfa yüklendikten sonra Jquery ile body’ye eklediğimiz preloader class’ını sileceğiz.

$(window).on("load", function (e) {
  $("body").removeClass("preload");
});

$(window).on("load", function (e) {

$("body").removeClass("preload");

});

Sorun çözüldü

Kaynak : https://css-tricks.com/transitions-only-after-page-load/

Post Views: 13.173

“Sayfa yüklenirken çirkin duran transition’ları engellemek” üzerine 5 yorum

Kısa ve öz olmuş elinize sağlık

Yanıtla

Teşekkürler

Yanıtla

Peki sayfayı refresh ettiğimizde aynı şekilde o kötü transition’lar geri geliyor sanırım?

Yanıtla

Aycan BÜLBÜL dedi ki:

30 Nisan 2019, 15:57

Gelmez, body’de preloader class’ı mevut direk sayfa gelir sonra transition’lar aktif olur.

Yanıtla

Çok işime yaradı elinize sağlık

Yanıtla

“Sayfa yüklenirken çirkin duran transition’ları engellemek” üzerine 5 yorum

Bir yanıt yazın Yanıtı iptal et