Verwendung von CSS für einen Einblendeffekt beim Laden der Seite

Können CSS-Übergänge verwendet werden, damit ein Textabsatz beim Laden der Seite eingeblendet wird?

Mir gefällt der Effekt auf http://dotmailapp.com/ sehr gut und ich würde gerne einen ähnlichen Effekt mit CSS verwenden. Die Domain wurde inzwischen gekauft und verfügt nicht mehr über den genannten Effekt. Eine archivierte Kopie kann auf der Wayback Machine eingesehen werden.

Illustration

Mit diesem Markup:

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

Mit der folgenden CSS-Regel:

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

Wie kann der Übergang beim Laden ausgelöst werden?

Peter Mortensen
Bearbeitete Frage 25. September 2019 в 5:20
Programmierung
css opacity css-transitions
26. Juli 2012 в 11:36
24 Aufrufe
Lösung

Methode 1:

Wenn Sie auf der Suche nach einem selbsterklärenden Übergang sind, sollten Sie CSS 3 Animationen verwenden. Sie werden zwar auch nicht unterstützt, aber genau dafür wurden sie entwickelt.

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

Demo

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

Browser-Unterstützung

Alle modernen Browser und Internet Explorer 10 (und höher): http://caniuse.com/#feat=css-animation


Methode 2:

Alternativ können Sie jQuery (oder einfaches JavaScript; siehe den dritten Codeblock) verwenden, um die Klasse beim Laden zu ändern:

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

Einfaches JavaScript (nicht in der Demo)

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

Demo

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

Browser-Unterstützung

Alle modernen Browser und Internet Explorer 10 (und höher): http://caniuse.com/#feat=css-transitions


Methode 3:

Oder Sie können die Methode verwenden, die .Mail verwendet:

jQuery

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

CSS

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

Demo

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

Browser-Unterstützung

jQuery 1.x: Alle modernen Browser und Internet Explorer 6 (und später): http://jquery.com/browser-support/
jQuery 2.x: Alle modernen Browser und Internet Explorer 9 (und später): http://jquery.com/browser-support/

Diese Methode ist am kompatibelsten, da der Zielbrowser keine CSS 3 Übergänge oder Animationen unterstützen muss.

Peter Mortensen
Bearbeitete Antwort 25. September 2019 в 5:16
Kommentare (15)

Sie können das HTML-Attribut "onload=""` verwenden und mit JavaScript die Deckkraft Ihres Elements anpassen.

Belassen Sie Ihr CSS so, wie Sie es vorgeschlagen haben. Ändern Sie Ihren HTML-Code entsprechend:


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

Dies funktioniert auch, um die komplette Seite nach dem Laden einzublenden:

HTML:

CSS:

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

Besuchen Sie die W3Schools Website: Übergänge und einen Artikel über Stiländerungen mit JavaScript.

Peter Mortensen
Bearbeitete Antwort 25. September 2019 в 5:20
Kommentare (1)

Als Antwort auf @A.M.K's Frage, wie man Übergänge ohne jQuery zu tun. Ein sehr einfaches Beispiel, das ich zusammengewürfelt habe. Wenn ich Zeit hatte, dies durch einige mehr zu denken, könnte ich in der Lage sein, den JavaScript-Code ganz zu beseitigen:


    body {
        background-color: red;
        transition: background-color 2s ease-in;
    }


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


    <p>test</p>
Peter Mortensen
Bearbeitete Antwort 25. September 2019 в 5:18
Kommentare (0)