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
|
1 |
<body class="preload"> |
CSS’e aşağıdaki kodu ekliyoruz
|
1 2 3 4 5 6 7 |
.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.
|
1 2 3 |
$(window).on("load", function (e) { $("body").removeClass("preload"); }); |
Sorun çözüldü 🙂
Kaynak : https://css-tricks.com/transitions-only-after-page-load/
Kısa ve öz olmuş elinize sağlık
Teşekkürler
Peki sayfayı refresh ettiğimizde aynı şekilde o kötü transition’lar geri geliyor sanırım?
Gelmez, body’de preloader class’ı mevut direk sayfa gelir sonra transition’lar aktif olur.
Çok işime yaradı elinize sağlık