Verwenden von CSS für den Einblendeffekt beim Laden der Seite

Können CSS-Übergänge verwendet werden, um zu ermöglichen, einen text Absatz für fade-in beim laden der Seite?

Ich mag, wie es aussieht auf http://dotmailapp.com/ und würde gerne einen ähnlichen Effekt mit CSS.

Hinweis: Die domain hat da schon gekauft und hat nicht mehr den Effekt erwähnt. Eine archivierte Kopie eingesehen werden kann auf der Wayback Machine.

Abbildung

Dass dieses 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 ausgelöst werden, die auf Last?

InformationsquelleAutor der Frage user1556266 | 2012-07-26

676

Methode 1:

Wenn Sie auf der Suche nach einem selbst-aufrufen übergang dann sollten Sie CSS3-AnimationenSie nicht unterstützt, als gut, aber das ist genau die Art von Sache, für die Sie gemacht wurden.

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, IE 10+: http://caniuse.com/#feat=css-animation

Methode 2:

Alternativ können Sie mit jQuery (oder plain, JS, siehe Dritte code-block) ändern Sie die Klasse laden:

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

Plain-JS (nicht in demo)

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

Demo

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

Browser-Unterstützung

Alle modernen Browser, IE 10+: http://caniuse.com/#feat=css-transitions

Methode 3:

Oder Sie können die Methode verwenden, die .E-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, IE 6+: http://jquery.com/browser-support/

jQuery 2.x: Alle modernen Browser, IE 9+: http://jquery.com/browser-support/

Diese Methode ist die cross-Kompatibilität der Ziel-browser nicht brauchen, um Unterstützung für CSS3 transitions oder Animationen.

InformationsquelleAutor der Antwort A.M.K

12

Können Sie die onload="" HTML-Attribut, und verwenden Sie JavaScript, um passen Sie die "Deckkraft" - Stil von Ihrem element.

Lassen Sie Ihre CSS-wie Sie vorgeschlagen. Bearbeiten Sie Ihre HTML-code zu:
```
<body onload="document.getElementById(test).style.opacity='1'">
    <div id="test">
        <p>This is a test</p>
    </div>
</body>
```
Dies funktioniert auch, um die fade-in-die komplette Seite wenn Sie fertig sind laden:

HTML:
```
<body onload="document.body.style.opacity='1'">
</body>
```
CSS:
```
body{ 
    opacity:0;
    transition: opacity 2s;
    -webkit-transition: opacity 2s; /* Safari */
}
```
Überprüfen Sie die W3Schools-website: übergänge und einen Artikel für wechselnde Stile mit javascript.

InformationsquelleAutor der Antwort Ned
4

In der Antwort zu @A. M. K ' s Frage nach, wie übergänge, ohne jQuery. Ein sehr einfaches Beispiel, ich warf zusammen. Wenn ich Zeit hatte, zu denken, das durch die einen mehr, die ich vielleicht in der Lage, zu beseitigen die javascript-insgesamt:
```
<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>
```
InformationsquelleAutor der Antwort Rob

Schreibe einen Kommentar

Du musst angemeldet sein, um einen Kommentar abzugeben.