Остановить переход CSS от запуска при загрузке страницы

У меня проблема с тем, что CSS-свойство transition срабатывает при загрузке страницы.

Проблема заключается в том, что когда я применяю 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)

Ответы

Ответ 1

Комментарии @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) тексту уже был назначен цвет браузера по умолчанию, и затем он использовал мое объявление CSS- transition для transition в его стилизованный цвет.

** Я до сих пор не уверен, что это самый подходящий способ сделать это, но он работает. Если у кого-то есть лучшее решение, пожалуйста, не стесняйтесь добавлять или редактировать.

Ответ 2

В Chrome есть ошибка, которая вызывает переходы CSS, если страница содержит элемент <form>.

Одним из простых исправлений является добавление тега скрипта, содержащего один пробел, в нижний колонтитул страницы.

<script> </script>

Вы можете следить за ошибкой по адресу https://crbug.com/332189 и https://crbug.com/167083.

Ответ 3

Добавьте к своему 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>

Ответ 4

Принятый ответ не помог мне. В Google Chrome есть bug, чего можно избежать только с помощью добавления script на странице. Даже пустая script решает проблему.

Ответ 5

Это единственное решение, которое мне удалось получить для надежной работы.

1. Добавьте класс "preload" к элементу body:

<body class="preload">

2. Добавьте следующий CSS:

.preload * {
  -webkit-transition: none !important;
  -moz-transition: none !important;
  -ms-transition: none !important;
  -o-transition: none !important;
 }

3 Добавьте следующий JS:

$(document).ready(function() {
  $("body").removeClass("preload");
});

Ответ 6

Ниенн отправляет решение. Проблема заключается в заголовке документа, и где/как вы загружаете свои таблицы стилей. Это похоже на "не может изменить заголовки, они уже отправлены" в PHP, за исключением того, что HTML/CSS/webkit не выдает ошибку.

У меня возникла именно эта проблема, прочитал пост nienn, и я пересмотрел свою голову. Здесь было мое содержание ранее.

<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 сайта.

Ответ 7

Лучший способ решить эту проблему - использовать одно пространство, пустое <script> исправление, найденное в ответах на этой странице. Однако я нашел 2 других способа решить эту проблему.

Поместите CSS оскорбительного элемента (ов) внутри тега <style> в заголовок вашего HTML файла. Ошибка возникает только при вызове CSS из внешней таблицы стилей.
Поместите нарушающий элемент в контейнер flexbox. Это также исправляет ошибку.

Ответ 8

Пробовали ли вы использовать разные свойства перехода? Например:

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

Работала отлично для меня в Chrome.

EDIT: Вы уже ответили на вопрос о браузерах. Вы должны попробовать использовать -webkit-transform