Використання 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

— користувач1556266
джерело

Ви можете прочитати це: bavotasan.com/2011/a-simple-fade-with-css3

— Едвін Баутіста,

Або це: css-tricks.com/snippets/css/…

— raksheetbhat

Відповіді:

914

Спосіб 1:

Якщо ви шукаєте перехід на самозванку, тоді слід використовувати CSS 3 Animations . Їх також не підтримують, але це саме та річ, для якої вони були зроблені.

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 не є сучасним браузером.

— Роб

Так, але що робити, якщо ви хочете / повинні бути назад сумісними з IE6? У такому випадку я думаю, що jQuery - найкращий варіант. Але запитувач хоче цього в CSS, тому я розмістив це як альтернативу.

— AMK

Чи не найкраще встановити початкову непрозорість у 0 в javascript? Таким чином, якщо у користувача відключений javascript, елемент просто там, а не ніколи не з’являється.

— Джонатан.

@AMK Я спробував зробити "виправлення", що просто в JavaScript, але не вдалося, так що врешті-решт я створив окремий файл css з opacity: 1 !important;і вклав <noscript>елемент.

— Джонатан.

Блискуча відповідь! Наскільки важко застосувати анімацію через $("#test p").addClass("load");кілька разів? Робити $("#test p").removeClass('load').addClass("load");це не виконує роботу, оскільки анімація вже припинилася. Чи можу я запустити перезапуск з JavaScript?

— banerban 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 .

— Нед
джерело

Чудова відповідь. З іншого боку, я думаю, ви можете встановити завантаження безпосередньо на елементі. Як <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>

— Роб
джерело