Зупинити перехід CSS від запуску при завантаженні сторінки

Question 1

У мене виникла проблема із transitionвластивістю CSS, яка запускається під час завантаження сторінки.

Проблема полягає в тому, що коли я застосовую color transitionелемент до елемента, (наприклад:), transition: color .2sтоді, коли сторінка вперше завантажує мої елементи, блимає від чорного до власного призначеного кольору.

Припустимо, у мене є такий код:

CSS

p.green {
   color: green;
   transition: color .2s;
   -moz-transition: color .2s;
   -webkit-transition: color .2s;
   -o-transition: color .2s;
}

p.green:hover {
   color: yellow;
}

HTML

<!DOCTYPE html PUBLIC '-//W3C//DTD XHTML 1.0 Transitional//EN'
'http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd'>
<html xmlns="http://www.w3.org/1999/xhtml" dir="ltr" lang="en">
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <script src="//ajax.googleapis.com/ajax/libs/jquery/1.8.0/jquery.min.js"></script>
    <script src="js/main.js"></script>
    <link href="css/main.css" rel="stylesheet" />
</head>
<body>
    <p class="green">The Flashing Text</p>
</body>
</html>

При завантаженні сторінки моя p.greenволя зникає з blackдо green.

Я не хочу застосовувати перехід кольору до :hoverпсевдокласу, оскільки це не застосовуватиме перехід onMouseLeave .

Мене дуже дратує, коли текст миготить через веб-сторінку. До цього моменту я уникав використання переходів, якщо вони мені дійсно не потрібні, і навіть тому я використовую їх обережно. Було б чудово, якщо б було справді очевидне рішення цього, якого я не бачу!

Це відбувається в Google Chrome. Я не тестував в інших браузерах.

jsfiddle.net/ShyZp/2 (спасибі @Shmiddty)

Question 2

У Chrome є помилка, через яку переходи CSS запускаються, якщо сторінка містить <form>елемент.

Одне просте виправлення - додати тег сценарію, що містить єдиний пробіл, до нижнього колонтитула сторінки.

<script> </script>

Ви можете слідкувати за помилкою на https://crbug.com/332189 та https://crbug.com/167083 .

Question 3

Коментарі @Shmiddty з цього питання змусили мене задуматися, тому я погрався з кодом і знайшов рішення.

Проблема полягає в headerдеклараціях. Інвертуючи порядок викликів зовнішніх файлів CSS та JS - тобто ставлячи CSS перед JS - кольорові переходи припиняють спрацьовування при завантаженні сторінки:

<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <link href="css/main.css" rel="stylesheet" />
    <script src="//ajax.googleapis.com/ajax/libs/jquery/1.8.0/jquery.min.js"></script>
    <script src="js/main.js"></script>
</head>

Я припускаю, що навантаження JS затримувало завантаження CSS після того, як DOM був готовий. На той час (як запропонував @Shmiddty) тексту вже було призначено колір браузера за замовчуванням, а потім він використовував мою transitionдекларацію CSS для переходу у свій стильовий колір.

** Я все ще не впевнений, що це найбільш підходящий спосіб це зробити, але він працює. Якщо хтось має краще рішення, будь ласка, додайте або відредагуйте.

Question 4

Додайте до свого CSS:

.css-transitions-only-after-page-load * {
  -webkit-transition: none !important;
  -moz-transition: none !important;
  -ms-transition: none !important;
  -o-transition: none !important;
}

І додайте код у свій глобальний файл JavaScript:

$(document).ready(function () {
    $(".css-transitions-only-after-page-load").each(function (index, element) {
        setTimeout(function () { $(element).removeClass("css-transitions-only-after-page-load") }, 10);
    });
});

Тепер ви можете позначити будь-який елемент на своїй сторінці за допомогою класу css-transitions-only-after-page-load :

<div class="container css-transitions-only-after-page-load">
...
</div>

Question 5

Прийнята відповідь не зробила для мене фокусу. У Google Chrome є помилка, яку можна уникнути, просто додавши на сторінку скрипт . Навіть порожній сценарій вирішує проблему.

Question 6

Найкращий спосіб вирішити цю проблему - використовувати єдиний пробіл, порожнє <script>виправлення, знайдене у відповідях на цій сторінці. Однак я знайшов 2 інші способи вирішення цієї проблеми.

Помістіть CSS порушуючих елементів у <style>тег у заголовку HTML-файлу. Помилка виникає лише тоді, коли CSS викликається із зовнішньої таблиці стилів.
Помістіть порушувальні елементи в flexboxконтейнер. Це також виправляє помилку.

Question 7

nienn розміщує рішення . Проблема полягає в голові документа та в тому, де / як ви завантажуєте таблиці стилів. Це схоже на "неможливо змінити заголовки, вони вже надіслані" в PHP, за винятком того, що HTML / CSS / webkit не видає вам помилки.

Я зіткнувся з цією точною проблемою, прочитав допис Нінн і переглянув свою голову. Ось мій вміст раніше.

<html>
<head>
    <meta http-equiv="content-type" content="text/html; charset=UTF-8">
    <html lang="en">
    <meta name="description" content="A website for me to do whatever I want with." >
    <title>My title</title>
    <link rel="stylesheet" type="text/css" href="/mD/media/foot.css">
    <link rel="stylesheet" href="mD/media/head.css" type="text/css">
</head>

Зверніть увагу, що я не завантажую жодну JS, також зверніть увагу на те, як я завантажував сторінку таблиць стилів після зазначення заголовка. Перемістивши посилання на таблицю стилів на "назад", це спрацювало як шарм. Кінцевий результат виглядав так:

<html>
<head>
    <meta http-equiv="content-type" content="text/html; charset=UTF-8">
    <html lang="en">
    <meta name="description" content="A website for me to do whatever I want with." >
    <link rel="stylesheet" type="text/css" href="/mD/media/foot.css">
    <link rel="stylesheet" href="mD/media/head.css" type="text/css">
    <title>My title</title>
</head>

Цю проблему може спричинити не тільки javascript, але й назва сайту. Я думаю, хорошим правилом є css> js> заголовок сайту.

Question 8

Ви можете просто додати порожній тег сценарію у свій HTML-файл.

Подобається це:

<script type="text/javascript"></script>

але він повинен містити принаймні один символ. Або пробіл, або новий рядок (\ n), або коментар (//), або що завгодно

<script type="text/javascript"> </script>

<script type="text/javascript">
</script>

<script type="text/javascript">//</script>

Або просто приєднайте файл js до вашого файлу html

<script type="text/javascript" src="js/script.js"></script>

Ви можете розміщувати тег сценарію де завгодно. У мітці голови чи тіла .

Ця проблема трапляється лише під час розробки, оскільки в кінцевій ситуації веб-сайт він точно матиме js-файл

Question 9

Ви пробували використовувати різні властивості переходу? Як от:

-moz-transition: color .2s; /* Firefox 4 */
-webkit-transition: color .2s; /* Safari and Chrome */
-o-transition: color .2s; /* Opera */

Мені в Chrome вдалось чудово.

EDIT: Ви вже відповіли на питання про браузери. Спробуйте використати -webkit-transform