Гибкие псевдоэлементы без анимации при наведении - PullRequest
Новая
       19

Гибкие псевдоэлементы без анимации при наведении

1 голос
/ 23 июня 2019

Это просто упрощенный пример, у меня есть элементы списка, каждый из которых имеет элемент 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>

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

1 Ответ

1 голос
/ 23 июня 2019

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

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>
...