Остановить переход 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

Ниенн публикует решение . Проблема заключается в заголовке документа и в том, где и как вы загружаете свои таблицы стилей. Это похоже на «невозможно изменить заголовки, они уже отправлены» в 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> title.

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.

РЕДАКТИРОВАТЬ: Вы уже ответили на вопрос о браузерах. Вы должны попробовать использовать -webkit-transform