Używanie CSS do uzyskania efektu zanikania przy ładowaniu strony

442

Czy można zastosować przejścia CSS, aby umożliwić zanikanie akapitu tekstu podczas ładowania strony?

Naprawdę podoba mi się, jak to wyglądało na http://dotmailapp.com/ i chciałbym użyć podobnego efektu za pomocą CSS. Domena została zakupiona i nie ma już wspomnianego efektu. Zarchiwizowaną kopię można wyświetlić na urządzeniu Wayback Machine .

Ilustracja

Posiadanie tego znacznika:

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

Z następującą regułą CSS:

#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;
}

Jak można uruchomić przejście po obciążeniu?

css css-transitions opacity

— użytkownik1556266
źródło

Możesz przeczytać to: bavotasan.com/2011/a-simple-fade-with-css3

— Edwin Bautista

Lub to: css-tricks.com/snippets/css/…

— raksheetbhat

Odpowiedzi:

914

Metoda 1:

Jeśli szukasz przejścia z samouwoływaniem, powinieneś użyć animacji CSS 3 . Nie są one również obsługiwane, ale jest to dokładnie to, dla czego zostały stworzone.

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; }
}

Próbny

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

Obsługa przeglądarki

Wszystkie nowoczesne przeglądarki i Internet Explorer 10 (i nowsze): http://caniuse.com/#feat=css-animation

Metoda 2:

Alternatywnie możesz użyć jQuery (lub zwykłego JavaScript; zobacz trzeci blok kodu), aby zmienić klasę przy ładowaniu:

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;
}

Zwykły JavaScript (nie w wersji demo)

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

Próbny

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

Obsługa przeglądarki

Wszystkie nowoczesne przeglądarki i Internet Explorer 10 (i nowsze): http://caniuse.com/#feat=css-transitions

Metoda 3:

Możesz także użyć metody używanej przez .Mail :

jQuery

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

CSS

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

Próbny

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

Obsługa przeglądarki

jQuery 1.x : Wszystkie nowoczesne przeglądarki i Internet Explorer 6 (i nowsze): http://jquery.com/browser-support/
jQuery 2.x : Wszystkie nowoczesne przeglądarki i Internet Explorer 9 (i nowsze): http: // jquery.com/browser-support/

Ta metoda jest najbardziej kompatybilna krzyżowo, ponieważ przeglądarka docelowa nie musi obsługiwać przejść ani animacji CSS 3 .

— AMK
źródło

149

Animacja CSS3 jest dobrze obsługiwana przez każdą nowoczesną przeglądarkę. Oczywiście IE nie jest nowoczesną przeglądarką.

— Rob

Tak, ale co jeśli chcesz / musisz być kompatybilny wstecz z IE6? W takim przypadku myślę, że jQuery jest najlepszą opcją. Ale pytający chce go w CSS, więc opublikowałem go jako alternatywę.

— AMK

Czy nie najlepiej jest ustawić początkową krycie na 0 w javascript? W ten sposób, jeśli użytkownik wyłączył javascript, element jest tam, zamiast go nigdy nie pojawiać.

— Jonathan.

@AMK Próbowałem zrobić „naprawę” tego tylko w javascript, ale nie udało mi się, więc w końcu utworzyłem osobny plik css opacity: 1 !important;i wstawiłem <noscript>element.

— Jonathan.

Genialna odpowiedź! Jak trudne jest $("#test p").addClass("load");wielokrotne stosowanie animacji ? Wykonanie $("#test p").removeClass('load').addClass("load");nie wykonuje zadania, ponieważ animacja już się zatrzymała. Czy mogę uruchomić restart z JavaScript?

— banerban Ghiță

Możesz użyć onload=""atrybutu HTML i JavaScript, aby dostosować styl krycia elementu.

Zostaw swój CSS zgodnie z propozycją. Edytuj kod HTML, aby:

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

Działa to również w celu dodawania całej strony po zakończeniu ładowania:

HTML:

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

CSS:

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

Sprawdź stronę W3Schools : przejścia i artykuł na temat zmiany stylów za pomocą JavaScript .

— Ned
źródło

Świetna odpowiedź. Alternatywnie myślę, że możesz ustawić obciążenie bezpośrednio na elemencie. Jak <div id="test" onload="this.style.opacity='1'">. Nie jestem jednak pewien, czy oznacza to, że zdarzenie zostanie uruchomione przed załadowaniem całego ciała.

— Jeppe

W odpowiedzi na pytanie @ AMK o tym, jak robić przejścia bez jQuery. Bardzo prosty przykład, który rzuciłem razem. Gdybym miał czas na przemyślenie tego, mógłbym całkowicie wyeliminować kod JavaScript:

<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>

— Obrabować
źródło