การใช้ CSS สำหรับเอฟเฟ็กต์จางหายกับการโหลดหน้าเว็บ

442

การเปลี่ยน CSS สามารถใช้เพื่ออนุญาตให้ย่อหน้าข้อความจางในการโหลดหน้า?

ฉันชอบวิธีที่มันดูบนhttp://dotmailapp.com/และชอบที่จะใช้เอฟเฟกต์ที่คล้ายกันโดยใช้ CSS โดเมนได้ถูกซื้อไปแล้วและไม่มีผลกระทบจากการกล่าวถึงอีกต่อไป สำเนาที่เก็บถาวรสามารถดูได้บนเครื่อง Waybackบนเครื่อง

ภาพประกอบ

มีมาร์กอัปนี้:

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

ด้วยกฎ 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;
}

การเปลี่ยนแปลงสามารถถูกทริกเกอร์กับโหลดได้อย่างไร

css css-transitions opacity

— user1556266
แหล่งที่มา

คุณอาจต้องการอ่านสิ่งนี้: bavotasan.com/2011/a-simple-fade-with-css3

— Edwin Bautista

หรือสิ่งนี้: css-tricks.com/snippets/css/…

— raksheetbhat

คำตอบ:

914

วิธีที่ 1:

หากคุณกำลังมองหาการเปลี่ยนแปลงด้วยตนเองแล้วคุณควรใช้ ภาพเคลื่อนไหว CSS 3ภาพเคลื่อนไหว พวกเขาไม่ได้รับการสนับสนุน แต่นี่เป็นสิ่งที่พวกเขาทำขึ้นมา

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

การสาธิต

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

สนับสนุนเบราว์เซอร์

เบราว์เซอร์ที่ทันสมัยและ Internet Explorer 10 (และใหม่กว่า): http://caniuse.com/#feat=css-animation

วิธีที่ 2:

หรือคุณสามารถใช้ jQuery (หรือ JavaScript ธรรมดาดูบล็อกโค้ดที่สาม) เพื่อเปลี่ยนคลาสที่โหลด:

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 ธรรมดา (ไม่ได้อยู่ในการสาธิต)

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

การสาธิต

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

สนับสนุนเบราว์เซอร์

เบราว์เซอร์ที่ทันสมัยและ Internet Explorer 10 (และใหม่กว่า): http://caniuse.com/#feat=css-transitions

วิธีที่ 3:

หรือคุณสามารถใช้วิธีการที่. Mailใช้:

jQuery

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

CSS

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

การสาธิต

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

สนับสนุนเบราว์เซอร์

jQuery 1.x : เบราว์เซอร์ที่ทันสมัยและ Internet Explorer 6 (และใหม่กว่า): http://jquery.com/browser-support/
jQuery 2.x : เบราว์เซอร์ที่ทันสมัยและ Internet Explorer 9 (และใหม่กว่า): http: // jquery.com/browser-support/

วิธีนี้ใช้ข้ามกันได้มากที่สุดเนื่องจากเบราว์เซอร์เป้าหมายไม่จำเป็นต้องรองรับการเปลี่ยน CSS หรือภาพเคลื่อนไหว 3

— AMK
แหล่งที่มา

149

CSS3 Animation รองรับเบราว์เซอร์สมัยใหม่ทุกรุ่น แน่นอน IE ไม่ใช่เบราว์เซอร์ที่ทันสมัย

— Rob

ใช่ แต่ถ้าคุณต้องการ / จำเป็นต้องย้อนกลับเข้ากันได้กับ IE6 ในกรณีนี้ฉันคิดว่า jQuery เป็นตัวเลือกที่ดีที่สุด แต่ผู้ถามต้องการมันใน CSS ดังนั้นฉันโพสต์ไว้เป็นทางเลือก

— AMK

การตั้งค่าความทึบเริ่มต้นเป็น 0 ใน javascript ดีที่สุดไม่ใช่หรือ ด้วยวิธีนี้หากผู้ใช้ปิดการใช้งานจาวาสคริปต์องค์ประกอบจะอยู่ที่นั่นแทนที่จะไม่ปรากฏ

— โจนาธาน

@AMK ฉันพยายามทำ "แก้ไข" ที่เป็นจาวาสคริปต์ แต่ไม่ได้จัดการดังนั้นในที่สุดฉันก็สร้างไฟล์ css แยกต่างหากopacity: 1 !important;และใส่<noscript>องค์ประกอบ

— โจนาธาน

คำตอบที่ยอดเยี่ยม! การใช้ภาพเคลื่อนไหวผ่าน$("#test p").addClass("load");หลาย ๆ ครั้งยากแค่ไหน? การทำ$("#test p").removeClass('load').addClass("load");ไม่ทำงานเนื่องจากภาพเคลื่อนไหวหยุดทำงานแล้ว ฉันสามารถเริ่มต้นใหม่จาก JavaScript ได้หรือไม่

— Șerban Ghiță

คุณสามารถใช้onload=""แอตทริบิวต์ HTML และใช้ JavaScript เพื่อปรับสไตล์ความทึบขององค์ประกอบของคุณ

ปล่อย CSS ของคุณตามที่คุณเสนอ แก้ไขรหัส HTML ของคุณเป็น:

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

นอกจากนี้ยังใช้ในการจางหน้าเต็มเมื่อโหลดเสร็จแล้ว:

HTML:

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

CSS:

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

ตรวจสอบW3Schoolsเว็บไซต์: การเปลี่ยนและบทความสำหรับการเปลี่ยนแปลงรูปแบบด้วย JavaScript

— เน็ด
แหล่งที่มา

คำตอบที่ดี อีกทางหนึ่งฉันเดาว่าคุณสามารถตั้งค่า onload ได้โดยตรงบนองค์ประกอบ กด<div id="test" onload="this.style.opacity='1'">ไลค์ ไม่แน่ใจว่ามันหมายถึงเหตุการณ์ที่เกิดขึ้นก่อนที่จะโหลดร่างกายทั้งหมดหรือไม่

— Jeppe

เพื่อตอบสนองต่อคำถามของ @ AMK เกี่ยวกับวิธีการเปลี่ยนผ่านโดยไม่มี jQuery ตัวอย่างง่ายๆที่ฉันได้โยนเข้าด้วยกัน หากฉันมีเวลาคิดมากกว่านี้ฉันอาจกำจัดรหัส 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>

— ปล้น
แหล่งที่มา