kzen.dev
Mer
Question

Använda CSS för en fade-in-effekt vid sidladdning

Kan CSS-övergångar användas för att låta ett textavsnitt tonas in när sidan laddas?

Jag gillar verkligen hur det såg ut på http://dotmailapp.com/ och skulle gärna vilja använda en liknande effekt med hjälp av CSS. Domänen har sedan dess köpts och har inte längre den nämnda effekten. En arkiverad kopia kan ses på Wayback Machine.

Illustration

Med denna markering:

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

Med följande 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;
}​

Hur kan övergången utlösas vid laddning?

Peter Mortensen
Peter Mortensen
Redigerad fråga 2019ör september 2019 в 5:20
Programmering
css
opacity
css-transitions
Popular videos
« Föregående
Nästa »
Solution / Answer

Metod 1:

Om du letar efter en självupplevd övergång bör du använda CSS 3 Animationer. De stöds inte heller, men det är precis den här typen av saker som de är gjorda för.

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

Stöd för webbläsare

Alla moderna webbläsare och Internet Explorer 10 (och senare): http://caniuse.com/#feat=css-animation


Metod 2:

Alternativt kan du använda jQuery (eller vanlig JavaScript; se det tredje kodblocket) för att ändra klassen vid laddning:

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 (inte i demotypen)

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

Demo

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

Stöd för webbläsare

Alla moderna webbläsare och Internet Explorer 10 (och senare): http://caniuse.com/#feat=css-transitions


Metod 3:

Eller så kan du använda den metod som .Mail använder:

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/

Stöd för webbläsare

jQuery 1.x: Alla moderna webbläsare och Internet Explorer 6 (och senare): http://jquery.com/browser-support/
jQuery 2.x: Alla moderna webbläsare och Internet Explorer 9 (och senare): http://jquery.com/browser-support/

Den här metoden är den mest tvärkompatibla eftersom målwebbläsaren inte behöver stödja CSS 3-övergångar eller animationer.

Peter Mortensen
Peter Mortensen
Redigerat svar 2019ör september 2019 в 5:16
843

Du kan använda HTML-attributet onload="" och använda JavaScript för att justera elementets opacitetsstil.

Lämna din CSS som du föreslagit. Redigera din HTML-kod så att:

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

Detta fungerar också för att fade in hela sidan när den är klar att laddas:

HTML:

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

CSS:

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

Kolla på webbplatsen W3Schools: övergångar och en artikel om ändring av stilar med JavaScript.

Peter Mortensen
Peter Mortensen
Redigerat svar 2019ör september 2019 в 5:20
20

Som svar på @A.M.K's fråga om hur man gör övergångar utan jQuery. Ett mycket enkelt exempel som jag slängde ihop. Om jag hade haft tid att tänka igenom det här lite mer kanske jag skulle kunna eliminera JavaScript-koden helt och hållet:

<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>
Peter Mortensen
Peter Mortensen
Redigerat svar 2019ör september 2019 в 5:18
5