Utilizzo di CSS per un effetto di dissolvenza sul caricamento della pagina

442

Le transizioni CSS possono essere utilizzate per consentire la dissolvenza di un paragrafo di testo al caricamento della pagina?

Mi piace molto come appariva su http://dotmailapp.com/ e mi piacerebbe usare un effetto simile usando i CSS. Da allora il dominio è stato acquistato e l'effetto non è più menzionato. Una copia archiviata può essere visualizzata sulla Wayback Machine .

Illustrazione

Avere questo markup:

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

Con la seguente regola 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;
}

Come può essere attivata la transizione al caricamento?

css css-transitions opacity

— user1556266
fonte

Potresti voler leggere questo: bavotasan.com/2011/a-simple-fade-with-css3

— Edwin Bautista,

O questo: css-tricks.com/snippets/css/…

— raksheetbhat

Risposte:

915

Metodo 1:

Se stai cercando una transizione auto-invocante, dovresti usare le Animazioni CSS 3 . Non sono supportati neanche, ma questo è esattamente il tipo di cosa per cui sono stati creati.

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

dimostrazione

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

Supporto per il browser

Tutti i browser moderni e Internet Explorer 10 (e versioni successive): http://caniuse.com/#feat=css-animation

Metodo 2:

In alternativa, è possibile utilizzare jQuery (o JavaScript semplice; vedere il terzo blocco di codice) per modificare la classe al caricamento:

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

JavaScript semplice (non nella demo)

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

dimostrazione

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

Supporto per il browser

Tutti i browser moderni e Internet Explorer 10 (e versioni successive): http://caniuse.com/#feat=css-transitions

Metodo 3:

In alternativa, è possibile utilizzare il metodo utilizzato da .Mail :

jQuery

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

CSS

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

dimostrazione

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

Supporto per il browser

jQuery 1.x : tutti i browser moderni e Internet Explorer 6 (e versioni successive): http://jquery.com/browser-support/
jQuery 2.x : tutti i browser moderni e Internet Explorer 9 (e versioni successive): http: // jquery.com/browser-support/

Questo metodo è il più compatibile tra loro in quanto il browser di destinazione non deve supportare transizioni o animazioni CSS 3 .

— AMK
fonte

149

L'animazione CSS3 è supportata perfettamente da tutti i browser moderni in circolazione. Naturalmente, IE non è un browser moderno.

— Rob,

Sì, ma cosa succede se si desidera / è necessario essere retrocompatibili con IE6? In tal caso, penso che jQuery sia l'opzione migliore. Ma chi lo desidera lo desidera nei CSS, quindi l'ho pubblicato come alternativa.

— AMK,

Non è meglio impostare l'opacità iniziale su 0 in javascript? In questo modo se l'utente ha javascript disabilitato l'elemento è proprio lì invece di non apparire mai.

— Jonathan.

@AMK Ho provato a fare "fix" che solo in javascript ma non ci sono riuscito, quindi alla fine ho creato un file css separato con opacity: 1 !important;e ho inserito un <noscript>elemento.

— Jonathan.

Risposta brillante! Quanto è difficile applicare l'animazione $("#test p").addClass("load");più volte? Fare $("#test p").removeClass('load').addClass("load");non fa il lavoro poiché l'animazione si è già fermata. Posso attivare un riavvio da JavaScript?

— banerban Ghiță

Puoi usare l' onload=""attributo HTML e usare JavaScript per regolare lo stile di opacità del tuo elemento.

Lascia il tuo CSS come da te proposto. Modifica il tuo codice HTML in:

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

Questo funziona anche per sfumare la pagina completa al termine del caricamento:

HTML:

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

CSS:

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

Controlla il sito Web di W3Schools : transizioni e un articolo per modificare gli stili con JavaScript .

— Ned
fonte

Bella risposta. In alternativa, suppongo che tu possa impostare l'onload direttamente sull'elemento. Come <div id="test" onload="this.style.opacity='1'">. Non sono sicuro se ciò significhi che l'evento viene attivato prima che venga caricato l'intero corpo.

— Jeppe,

In risposta alla domanda di @ AMK su come eseguire le transizioni senza jQuery. Un esempio molto semplice che ho messo insieme. Se avessi il tempo di pensarci su un po 'di più, potrei essere in grado di eliminare del tutto il codice 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>

— rapinare
fonte