Почему в chrome transition ведет себя так?

Столкнулся со странным поведением свойства transition в chrome, edge и opera.

Берём как пример следующее:

<!DOCTYPE html>
<html lang="ru">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <title>Document</title>
  <link rel="stylesheet" href="trn-bug.css" />
</head>
<body>

  <a href="#">test</a>

</body>
</html>


a {
  color: black;
  -webkit-transition: 10s color;
  -o-transition: 10s color;
  transition: 10s color; }
  a:hover {
    color: red; }


Собственно при открытии страницы в firefox всё нормально: Изначально ссылка чёрного цвета, при наведении происходит плавный переход к красному, однако в указанных выше браузерах происходит следующее при открытии / обновлении страницы:

Сначала ссылка принимает синий цвет (по дефолту, когда не заданы css стили) => с синего цвета идёт transition на чёрный (заданный как основной в css) => при hover исправно изменяет цвет на красный.

Собственно является ли это нормальным? Исправится ли ситуация, если вместо transition использовать css animation?

Или проще через js откладывать transition до полной загрузки документа?
  • Вопрос задан
  • 102 просмотра
Решения вопроса 1
sniggering_deus
@sniggering_deus Куратор тега CSS
I will live forever in the flame of your eyes.
Метод первый:

<body>
<a class="my-link" href="#">test</a>
<script> </script> // Вставляем перед закрывающим тегом body два пустых тега script с одиночным пробелом.
</body>


Свойство transition не будет срабатывать при загрузке.

=======================================================
=======================================================

Метод второй:

На тег body или main вешаете два класса main-element no-transition:

<body class="main-element no-transition">
<a class="my-link" href="#">test</a>
</body>


Затем подключаете скрипт с таким содержимым:

<script>
document.addEventListener("DOMContentLoaded", (event) => {
document.querySelector(".main-element").classList.remove("no-transition");
});
</script>


В CSS пишем такие стили для селектора с классом .no-transition:

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


Т.е после полной загрузки страницы с элемента содержащий класс .main-element удаляется второй класс .no-transition. Имена для классов можете заменить на свои.

=======================================================
=======================================================

Третий способ:

Перед закрывающим тегом body подключаем какой-нибудь скрипт:

<body class="main-element no-transition">
<a class="my-link" href="#">test</a>
<script src="main.js"></script> // Какой-нибудь скрипт, ведь сайт использует хоть какие-то скрипты?)
</body>


И всё будет окей.

=======================================================
=======================================================

CSS стили для ссылки чтобы проверить анимацию при наведении:

body {
      display: flex;
      justify-content: center;
      align-items: center;
      height: 100%;
      min-height: 100vh;
}

.my-link {
      color: black;
     transition: color 500ms ease;
      font-size: 80px;
}

.my-link:hover {
      color: red;
}
Ответ написан
Пригласить эксперта
Ваш ответ на вопрос

Войдите, чтобы написать ответ

Войти через центр авторизации
Похожие вопросы