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

Answer 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)

Answer 2

2

Быстрая мысль:window.onload = function(){document.body.className += " loaded";} body.loaded p.green{transition:color .2s;}

Shmiddty

Answer 3

1

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

nienn

Answer 4

Я не могу воссоздать проблему в Chrome: jsfiddle.net/ShyZp

Shmiddty

Answer 5

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

Илан Бяла

Answer 6

1

Проблему можно увидеть здесь, но это действительно только в том случае, если два объявления не происходят в одном файле: jsfiddle.net/ShyZp/2

Shmiddty

Answer 7

110

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

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

<script> </script>

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

spencer.sm
источник

2

У меня <script async src="main.js"></script>в конце моего документа. Удаление asyncатрибута исправило нежелательные переходы при загрузке страницы. 👍

Кайл Фокс

2

Как @KyleFox я был deferна моем <script>теге и удаление его решить мою проблему. После этого я просто переместил сценарий в конец документа.

jonathanbell

У меня это сработало непоследовательно (раньше ошибка возникала в 100% случаев; с этим изменением это происходило в 50% случаев). Что действительно работало в 100% случаев, на что меня вдохновил этот ответ, так это переупорядочивание материала в <head>моем документе так, чтобы мой CSS был включен до моего JavaScript, а не после него; Я буквально решил ошибку, переместив свой <script>тег Google Analytics . Очевидно, что в Chrome есть какое-то состояние гонки или проблема с синхронизацией, которые можно сгладить задержкой, вызванной интерпретацией небольшого количества JS, хотя точная механика для меня загадочна.

Марк Эймери

2

FWIW, у меня все еще была эта проблема даже без JS на странице. Единственное, что исправило это для меня, - это перемещение CSS в начало <body>тега. Я добавил <link rel="preload" href="main.css" as="style">к <head>так он все равно скачать сразу.

Тед Уайтхед

У меня не было элемента <form> на моей странице, и он решил ошибку

Cesar Castro

Answer 8

2

У меня <script async src="main.js"></script>в конце моего документа. Удаление asyncатрибута исправило нежелательные переходы при загрузке страницы. 👍

Кайл Фокс

Answer 9

2

Как @KyleFox я был deferна моем <script>теге и удаление его решить мою проблему. После этого я просто переместил сценарий в конец документа.

jonathanbell

Answer 10

У меня это сработало непоследовательно (раньше ошибка возникала в 100% случаев; с этим изменением это происходило в 50% случаев). Что действительно работало в 100% случаев, на что меня вдохновил этот ответ, так это переупорядочивание материала в <head>моем документе так, чтобы мой CSS был включен до моего JavaScript, а не после него; Я буквально решил ошибку, переместив свой <script>тег Google Analytics . Очевидно, что в Chrome есть какое-то состояние гонки или проблема с синхронизацией, которые можно сгладить задержкой, вызванной интерпретацией небольшого количества JS, хотя точная механика для меня загадочна.

Марк Эймери

Answer 11

2

FWIW, у меня все еще была эта проблема даже без JS на странице. Единственное, что исправило это для меня, - это перемещение CSS в начало <body>тега. Я добавил <link rel="preload" href="main.css" as="style">к <head>так он все равно скачать сразу.

Тед Уайтхед

Answer 12

У меня не было элемента <form> на моей странице, и он решил ошибку

Cesar Castro

Answer 13

Комментарии @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 для перехода в свой стилизованный цвет.

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

Answer 14

Это удачное решение - оно может работать сегодня, но не работать завтра, когда вы вносите изменения в код.

Джон Охара

Answer 15

Я также могу воспроизвести проблему без единого файла JS, поэтому этот ответ не решит мою проблему. Принятый все же сделал.

Альваро

Answer 16

Этот ответ звучит так, будто ваша проблема заключалась в кешировании.

TylerH

Answer 17

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

Answer 18

4

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

Манушеп
источник

Удивлен, что эта ошибка творится годами. Чтобы добавить к ответу, <script>теги должны располагаться после элементов DOM, с которыми у вас возникла проблема. Я бы рекомендовал просто разместить его в конце вашей страницы.

Kenny Worden

Хм. spencer.sm дал то, что, по сути, является более подробным дубликатом этого ответа, теперь проголосовало намного выше, чем ваш. Ваш был первым, но, поскольку он возвысился над ним, ваше существование, насколько я могу судить, больше не добавляет никакой ценности. Может пора его удалить?

Марк Эймери

Answer 19

Удивлен, что эта ошибка творится годами. Чтобы добавить к ответу, <script>теги должны располагаться после элементов DOM, с которыми у вас возникла проблема. Я бы рекомендовал просто разместить его в конце вашей страницы.

Kenny Worden

Answer 20

Хм. spencer.sm дал то, что, по сути, является более подробным дубликатом этого ответа, теперь проголосовало намного выше, чем ваш. Ваш был первым, но, поскольку он возвысился над ним, ваше существование, насколько я могу судить, больше не добавляет никакой ценности. Может пора его удалить?

Марк Эймери

Answer 21

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

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

Answer 22

это решение, если у вас нет файла js и вы не хотите использовать js

CodeWeis

Answer 23

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

Answer 24

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

Скотт

Answer 25

Вы можете просто добавить пустой тег скрипта в свой 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.

Answer 26

-2

Вы пробовали использовать разные свойства перехода? Такие как:

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

У меня отлично работал в Chrome.

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

Банат
источник

Я использую это, извините, просто подумал, что добавлю упрощенный код в вопрос.

nienn

Хорошо, кстати, я думал, IE не поддерживает переходы CSS3?

Banath

Ну вот и все! :) Вы, конечно, правы! Я застрял в Chrome для этого, перешел в IE только ради этого вопроса и даже не подумал об этой * незначительной детали ...

nienn

Answer 27

Я использую это, извините, просто подумал, что добавлю упрощенный код в вопрос.

nienn

Answer 28

Хорошо, кстати, я думал, IE не поддерживает переходы CSS3?

Banath

Answer 29

Ну вот и все! :) Вы, конечно, правы! Я застрял в Chrome для этого, перешел в IE только ради этого вопроса и даже не подумал об этой * незначительной детали ...

nienn

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

CSS

HTML

Ответы: