Question

这只是一个简化的示例，我有一个列表项，每个列表项在伪元素之后都有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>

我做错什么了吗？浏览器不支持吗？

Answer 1

我已经简化了您的代码，因为其中大多数与问题没有任何关系，这只是一个非常长的过渡时间。 300s。那是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>

Flex伪元素未在悬停时进行动画处理

1 个答案: