Sayfa yüklemesinde solma etkisi için CSS kullanma

442

CSS geçişleri, bir metin paragrafının sayfa yüklenirken solmasına izin vermek için kullanılabilir mi?

Http://dotmailapp.com/ adresinde nasıl göründüğünü çok seviyorum seviyorum ve CSS kullanarak benzer bir efekt kullanmak . Alan adı o zamandan beri satın alındı ve artık söz konusu etkiye sahip değil. Arşivlenmiş bir kopya Wayback Machine'de görüntülenebilir .

örnekleme

Bu biçimlendirmeye sahip olmak:

<div id="test">
    <p>This is a test</p>
</div>

Aşağıdaki CSS kuralıyla:

#test p {
    opacity: 0;
    margin-top: 25px;
    font-size: 21px;
    text-align: center;
    -webkit-transition: opacity 2s ease-in;
    -moz-transition: opacity 2s ease-in;
    -o-transition: opacity 2s ease-in;
    -ms-transition: opacity 2s ease-in;
    transition: opacity 2s ease-in;
}

Yükte geçiş nasıl tetiklenebilir?

css css-transitions opacity

— user1556266
kaynak

Bunu okumak isteyebilirsiniz: bavotasan.com/2011/a-simple-fade-with-css3

— Edwin Bautista

Veya bu: css-tricks.com/snippets/css/…

— raksheetbhat

Yanıtlar:

914

Yöntem 1:

Kendi kendini çağıran bir geçiş arıyorsanız, CSS 3 Animations kullanmalısınız . Onlar da desteklenmiyor, ama bu tam olarak yapıldıkları şey.

CSS

#test p {
    margin-top: 25px;
    font-size: 21px;
    text-align: center;

    -webkit-animation: fadein 2s; /* Safari, Chrome and Opera > 12.1 */
       -moz-animation: fadein 2s; /* Firefox < 16 */
        -ms-animation: fadein 2s; /* Internet Explorer */
         -o-animation: fadein 2s; /* Opera < 12.1 */
            animation: fadein 2s;
}

@keyframes fadein {
    from { opacity: 0; }
    to   { opacity: 1; }
}

/* Firefox < 16 */
@-moz-keyframes fadein {
    from { opacity: 0; }
    to   { opacity: 1; }
}

/* Safari, Chrome and Opera > 12.1 */
@-webkit-keyframes fadein {
    from { opacity: 0; }
    to   { opacity: 1; }
}

/* Internet Explorer */
@-ms-keyframes fadein {
    from { opacity: 0; }
    to   { opacity: 1; }
}

/* Opera < 12.1 */
@-o-keyframes fadein {
    from { opacity: 0; }
    to   { opacity: 1; }
}

gösteri

http://jsfiddle.net/SO_AMK/VV2ek/

Tarayıcı Desteği

Tüm modern tarayıcılar ve Internet Explorer 10 (ve üstü): http://caniuse.com/#feat=css-animation

Yöntem 2:

Alternatif olarak, yükleme sırasında sınıfı değiştirmek için jQuery (veya düz JavaScript; üçüncü kod bloğuna bakın) kullanabilirsiniz:

jQuery

$("#test p").addClass("load");

CSS

#test p {
    opacity: 0;
    font-size: 21px;
    margin-top: 25px;
    text-align: center;

    -webkit-transition: opacity 2s ease-in;
       -moz-transition: opacity 2s ease-in;
        -ms-transition: opacity 2s ease-in;
         -o-transition: opacity 2s ease-in;
            transition: opacity 2s ease-in;
}

#test p.load {
    opacity: 1;
}

Açık JavaScript (demoda değil)

document.getElementById("test").children[0].className += " load";

gösteri

http://jsfiddle.net/SO_AMK/a9dnW/

Tarayıcı Desteği

Tüm modern tarayıcılar ve Internet Explorer 10 (ve üstü): http://caniuse.com/#feat=css-transitions

Yöntem 3:

Veya, .Mail'in kullandığı yöntemi kullanabilirsiniz :

jQuery

$("#test p").delay(1000).animate({ opacity: 1 }, 700);

CSS

#test p {
    opacity: 0;
    font-size: 21px;
    margin-top: 25px;
    text-align: center;
}

gösteri

http://jsfiddle.net/SO_AMK/a9dnW/3/

Tarayıcı Desteği

jQuery 1.x : Tüm modern tarayıcılar ve Internet Explorer 6 (ve üstü): http://jquery.com/browser-support/
jQuery 2.x : Tüm modern tarayıcılar ve Internet Explorer 9 (ve üstü): http: // jquery.com/browser-support/

Hedef tarayıcı CSS 3 geçişlerini veya animasyonlarını desteklemesi gerekmediğinden, bu yöntem en çapraz uyumludur .

— AMK
kaynak

149

CSS3 Animasyonu etraftaki her modern tarayıcı tarafından desteklenmektedir. Elbette IE modern bir tarayıcı değil.

— Rob

Evet, ama IE6 ile geriye dönük olarak uyumlu olmak istiyorsanız / ihtiyacınız varsa ne olacak? Bu durumda jQuery en iyi seçenek olduğunu düşünüyorum. Ancak, asker CSS'de istiyor, bu yüzden alternatif olarak gönderdim.

— AMK

Javascript'te ilk opaklığı 0 olarak ayarlamak en iyisi değil mi? Bu şekilde, kullanıcı javascript devre dışı bırakılmışsa, öğe asla görünmek yerine oradadır.

— Jonathan.

@ AMK Ben sadece javascript "fix" yapmaya çalıştı ama başaramadı, bu yüzden sonunda ayrı bir css dosyası oluşturdu opacity: 1 !important;ve bir <noscript>öğe koymak .

— Jonathan.

Mükemmel cevap! Animasyonu $("#test p").addClass("load");birden çok kez uygulamak ne kadar zor ? Yapma $("#test p").removeClass('load').addClass("load");animasyon Zaten durdurulmuş beri iş yapmaz. JavaScript'ten yeniden başlatmayı tetikleyebilir miyim?

— banerban Ghiță

Sen kullanabilirsiniz onload=""HTML niteliği ve öğesinin opaklık stilini ayarlamak için JavaScript kullanır.

CSS'nizi önerdiğiniz gibi bırakın. HTML kodunuzu şu şekilde düzenleyin:

<body onload="document.getElementById(test).style.opacity='1'">
    <div id="test">
        <p>This is a test</p>
    </div>
</body>

Bu, yükleme tamamlandığında sayfanın tamamen solması için de çalışır:

HTML:

<body onload="document.body.style.opacity='1'">
</body>

CSS:

body{ 
    opacity: 0;
    transition: opacity 2s;
    -webkit-transition: opacity 2s; /* Safari */
}

JavaScript ile stilleri değiştirmek için W3Schools web sitesine bakın: geçişler ve makale .

— Ned
kaynak

Mükemmel cevap. Alternatif olarak, yükü doğrudan eleman üzerinde ayarlayabilirsiniz. Gibi <div id="test" onload="this.style.opacity='1'">. Tüm vücut yüklenmeden önce olayın tetiklenip tetiklenmediği konusunda emin değilim.

— Jeppe

@ AMK'nın jQuery olmadan geçişlerin nasıl yapılacağı sorusuna yanıt olarak. Birlikte attığım çok basit bir örnek. Bunu biraz daha düşünmek için zamanım olsaydı, JavaScript kodunu tamamen ortadan kaldırabilirdim:

<style>
    body {
        background-color: red;
        transition: background-color 2s ease-in;
    }
</style>

<script>
    window.onload = function() {
        document.body.style.backgroundColor = '#00f';
    }
</script>

<body>
    <p>test</p>
</body>

— soymak
kaynak