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

Я испытываю проблему со свойством 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.



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



Правка 1:
это происходит в Google Chrome. Не тестировался в других браузерах пока...



Правка 2:
после некоторых тестов я понял, что мне не нужен родительский элемент с назначенным цветом, чтобы вызвать мигание на элементе со свойством перехода цвета, поэтому я перефразировал свой вопрос



Jsfiddle.net/ShyZp/2 (спасибо @Shmiddty)

956   7  

7 ответов:

Существует Ошибка в Chrome это приводит к срабатыванию CSS-переходов, если страница содержит элемент <form>.

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

<script> </script>
32  
2017-03-23 09:23:25

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

Я все еще не уверен, что это самый подходящий способ сделать это, но он работает. Если у кого-то есть лучшее решение, Пожалуйста, не стесняйтесь добавлять или редактировать.
30  
2013-01-19 18:23:59

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

<div class="container css-transitions-only-after-page-load">
...
</div>
5  
2013-11-15 15:59:35

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

2  
2016-10-18 00:21:39

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

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

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 > название сайта.

1  
2015-06-03 00:17:03

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

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

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

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

0  
2013-01-18 00:56:18

Comments

    Ничего не найдено.
Click here to cancel reply.