Sử dụng CSS để tạo hiệu ứng mờ dần khi tải trang

442

Chuyển tiếp CSS có thể được sử dụng để cho phép một đoạn văn bản mờ dần khi tải trang không?

Tôi thực sự thích giao diện của nó trên http://dotmailapp.com/ và rất thích sử dụng hiệu ứng tương tự bằng CSS. Tên miền đã được mua và không còn có hiệu lực được đề cập. Một bản sao lưu trữ có thể được xem trên Wayback Machine .

Hình minh họa

Có đánh dấu này:

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

Với quy tắc CSS sau:

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

Làm thế nào quá trình chuyển đổi có thể được kích hoạt trên tải?

css css-transitions opacity

— người dùng1556266
nguồn

Bạn có thể muốn đọc điều này: bavotasan.com/2011/a-simple-fade-with-css3

— Edwin Bautista

Hoặc này: css-tricks.com/snippets/css/ từ

— raksheetbhat

Câu trả lời:

914

Cách 1:

Nếu bạn đang tìm kiếm một quá trình tự gọi thì bạn nên sử dụng CSS 3 Animations . Họ cũng không được hỗ trợ, nhưng đây chính xác là loại mà họ được tạo ra.

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

Bản giới thiệu

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

Hỗ trợ trình duyệt

Tất cả các trình duyệt hiện đại và Internet Explorer 10 (và phiên bản mới hơn): http://caniuse.com/#feat=css-animation

Cách 2:

Ngoài ra, bạn có thể sử dụng jQuery (hoặc JavaScript đơn giản; xem khối mã thứ ba) để thay đổi lớp khi tải:

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 thuần túy (không có trong bản demo)

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

Bản giới thiệu

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

Hỗ trợ trình duyệt

Tất cả các trình duyệt hiện đại và Internet Explorer 10 (và phiên bản mới hơn): http://caniuse.com/#feat=css-transitions

Cách 3:

Hoặc, bạn có thể sử dụng phương thức mà .Mail sử dụng:

jQuery

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

CSS

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

Bản giới thiệu

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

Hỗ trợ trình duyệt

jQuery 1.x : Tất cả các trình duyệt hiện đại và Internet Explorer 6 (và mới hơn): http://jquery.com/browser-support/
jQuery 2.x : Tất cả các trình duyệt hiện đại và Internet Explorer 9 (và mới hơn): http: // jquery.com/browser-support/

Phương pháp này tương thích chéo nhất vì trình duyệt đích không cần hỗ trợ chuyển tiếp hoặc hoạt hình CSS 3 .

— AMK
nguồn

149

CSS3 Animation được hỗ trợ tốt bởi mọi trình duyệt hiện đại xung quanh. Tất nhiên, IE không phải là một trình duyệt hiện đại.

— Cướp

Có, nhưng nếu bạn muốn / cần tương thích ngược với IE6 thì sao? Trong trường hợp đó tôi nghĩ rằng jQuery là lựa chọn tốt nhất. Nhưng, người hỏi muốn nó bằng CSS nên tôi đã đăng nó dưới dạng thay thế.

— AMK

Không phải là tốt nhất để đặt độ mờ ban đầu thành 0 trong javascript sao? Theo cách đó, nếu người dùng đã vô hiệu hóa javascript thì phần tử chỉ ở đó thay vì không bao giờ xuất hiện.

— Jonathan.

@AMK Tôi đã thử thực hiện "sửa lỗi" chỉ trong javascript nhưng không quản lý được, vì vậy cuối cùng tôi đã tạo một tệp css riêng biệt opacity: 1 !important;và đặt vào một <noscript>phần tử.

— Jonathan.

Câu trả lời rực rỡ! Làm thế nào khó là áp dụng hình ảnh động qua $("#test p").addClass("load");nhiều lần? Làm $("#test p").removeClass('load').addClass("load");không thực hiện công việc kể từ khi hoạt hình đã dừng lại. Tôi có thể kích hoạt khởi động lại từ JavaScript không?

— Șerban Ghiță

Bạn có thể sử dụng onload=""thuộc tính HTML và sử dụng JavaScript để điều chỉnh kiểu mờ của phần tử của bạn.

Để lại CSS của bạn như bạn đề xuất. Chỉnh sửa mã HTML của bạn thành:

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

Điều này cũng hoạt động để làm mờ dần trong trang hoàn chỉnh khi tải xong:

HTML:

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

CSS:

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

Kiểm tra trang web của W3Schools : các hiệu ứng chuyển tiếp và một bài viết để thay đổi kiểu với JavaScript .

— Ned
nguồn

Câu trả lời chính xác. Ngoài ra, tôi đoán bạn có thể đặt tải trực tiếp trên phần tử. Thích <div id="test" onload="this.style.opacity='1'">. Không chắc chắn nếu nó có nghĩa là sự kiện được kích hoạt trước khi toàn bộ cơ thể được tải.

— Jeppe

Trả lời câu hỏi của @ AMK về cách thực hiện chuyển đổi mà không cần jQuery. Một ví dụ rất đơn giản tôi đã ném cùng nhau. Nếu tôi có thời gian để suy nghĩ điều này thông qua một số chi tiết, tôi có thể loại bỏ hoàn toàn mã 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>

— Cướp
nguồn