Псевдоэлементы Flex не анимируются при наведении

Это просто упрощенный пример, у меня есть элементы списка, каждый из которых имеет гибкий элемент после псевдоэлемента. Я использую их для анимации эффекта подчеркивания при наведении. Когда дисплей меняется, он работает, но когда я использую flex, эффекта нет. Вот пример: https://jsfiddle.net/79ftcx48/2/

html div {
  background-color: rgba(0, 0, 0, 0.1);
  display: flex;
  position: absolute;
  left: 50%;
  top: 50%;
  width: 100%;
  padding: 1%;
  transform: translate(-50%, -50%);
  justify-content: space-between;
  align-items: stretch;
}

html div>* {
  background-color: slategrey;
  margin: 0 5px 0;
  color: floralwhite;
  padding: 5px;
}

html div ul {
  display: flex;
  flex-direction: column-reverse;
  list-style: none;
  margin-right: auto;
  order: -1;
}

html div ul li::after {
  content: "";
  display: flex;
  height: 1px;
  width: 0px;
  transition: all 300s ease;
  background-color: peru;
  order: -1;
}

html div ul li:hover::after {
  width: 40px;
}

<div>

  <aside>
    This is the aside
  </aside>
  <ul>
    <li>First</li>
    <li>Second</li>
    <li>Third</li>
  </ul>
  <p>
    Lorem ipsum text is pretty freaking dumb.
  </p>

</div>

Я что-то не так делаю или это не поддерживается браузерами?

Не могли бы вы привести пример без flex, где поведение соответствует ожидаемому?

— 22.06.2019 23:10

Вы уверены, что хотите подождать 300 секунд до перехода? если это так, вы заметите, что он работает нормально

— 22.06.2019 23:18

@TemaniAfif: Вот и все, спасибо!!! Пожалуйста, закрой.

— 22.06.2019 23:21

css flexbox css-transitions

22.06.2019 23:06

Приемы CSS-макетирования - floats и Flexbox

Здравствуйте, друзья-студенты! Готовы совершенствовать свои навыки веб-дизайна? Сегодня в нашем путешествии мы рассмотрим приемы CSS-верстки - в...

Введение в CSS

CSS является неотъемлемой частью трех основных составляющих front-end веб-разработки.

Как выровнять Div по центру?

Чтобы выровнять элемент <div>по горизонтали и вертикали с помощью CSS, можно использовать комбинацию свойств и значений CSS. Вот несколько методов,...

Навигация по приложениям React: Исчерпывающее руководство по React Router

React Router стала незаменимой библиотекой для создания одностраничных приложений с навигацией в React. В этой статье блога мы подробно рассмотрим...

Система управления парковками с использованием HTML, CSS и JavaScript

Веб-сайт по управлению парковками был создан с использованием HTML, CSS и JavaScript. Это простой сайт, ничего вычурного. Основная цель -...

CSS: FlexBox

Ранее разработчики использовали макеты с помощью Position и Float. После появления flexbox сценарий полностью изменился.

Перейти к ответу Данный вопрос помечен как решенный

Ответы 1

Ответ принят как подходящий

Я упростил ваш код, потому что большая его часть не имеет никакого отношения к проблеме, а это просто очень большая продолжительность перехода. 300 с. Это 5 минут! Тестирование с 1s ниже. Ваш код работает нормально.

div {
  display: flex;
}

div>* {
  background-color: slategrey;
  margin: 0 5px 0;
  color: floralwhite;
  padding: 5px;
}

ul {
  display: flex;
  flex-direction: column;
  list-style: none;
  margin-right: auto;
  order: -1;
}

div ul li::after {
  content: "";
  display: flex;
  height: 2px;
  width: 0px;
  transition: all 1s ease;
  background-color: peru;
}

ul li:hover::after {
  width: 40px;
  background-color: orange;
}

<div>
  <aside>
    This is the aside
  </aside>
  <ul>
    <li>First</li>
    <li>Second</li>
    <li>Third</li>
  </ul>
  <p>
    Lorem ipsum text is pretty freaking dumb.
  </p>
</div>

22.06.2019 23:23

Другие вопросы по теме

Flexbox - Как предотвратить сдвиг div вправо в длинном тексте?

Как получить каждый элемент в одном углу с помощью Flexbox CSS?

Выравнивание правого размера сетки с суммарной высотой динамических сеток слева

Сделать гибкий элемент той же ширины, что и родитель

CSS не применяется при использовании гибкого дисплея в Microsoft Edge

Отображение адаптивного текста в нескольких столбцах и строках в ReactJS

Css отзывчивый столбец гибкого макета в строку

Макет файлового браузера в CSS

Выравнивание заголовка по вертикали рядом с div

Элемент Flex не центрируется в IE

Псевдоэлементы Flex не анимируются при наведении

Ответы 1

Другие вопросы по теме

Похожие вопросы