html - 在 flexbox 订单上使用过渡

Question

有什么方法可以让 flex-box 元素的顺序发生变化吗？

换句话说，我可以要这个吗(详情在这个 fiddle )

#container {
    display: flex;
}
#container:hover div:last-child {
    order: -1;
}

动画(获得新位置的元素会随着时间的推移假定它的位置)，好吗？

Answer 1

我并没有真正回答这个问题，因为我没有使用订单属性。

但我想做一些与您期望的类似的事情，最后决定:

• 在 HTML 中，为元素添加一个 data-order 属性
• 为每个元素位置添加 CSS 属性
• 使用 Javascript 更改数据顺序
• 使用 CSS 过渡进行插值

setInterval(changeOrder, 3000);

function changeOrder() {
  const allSlides = document.querySelectorAll(".single-slide");
  const previous = "1";
  const current = "2";
  const next = "3";

  for (const slide of allSlides) {
    const order = slide.getAttribute("data-order");

    switch (order) {
      case current:
        slide.setAttribute("data-order", previous);
        break;
      case next:
        slide.setAttribute("data-order", current);
        break;
      case previous:
        slide.setAttribute("data-order", next);
        break;
    }
  }
}

.all-slides {
  display: flex;
  width: 80vw;
  margin: 0 auto;
  perspective: 500px;
  height: 500px;
}

.single-slide {
  padding: 30px 20px;
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  width: 30%;
  position: absolute;
  background-color: white;
  transition: 2s ease;
  box-shadow: 0px 5px 10px lightgrey;
}

/* Left slide*/
.single-slide[data-order="1"] {
  left: 10vw;
  transform: translate(-50%) scale(0.8, 0.8);
  z-index: 1;
  opacity: 0.7;
}

/* Middle slide */
.single-slide[data-order="2"] {
  left: 40vw;
  transform: translate(-50%);
  z-index: 3;
  opacity: 1;
}

/* Right slide*/
.single-slide[data-order="3"] {
  left: 90vw;
  transform: translate(-120%) scale(0.8, 0.8);
  z-index: 2;
  opacity: 0.7;
}

.single-slide:nth-child(2) {
  order: 3;
}

.single-slide:nth-child(1) {
  order: 2;
}

.single-slide:nth-child(3) {
  order: 1;
}

<div class="all-slides">
  <div class="single-slide" data-order="2">
    <h3>First slide </h3>
    <p>Some text</p>
  </div>
  <div class="single-slide" data-order="3">
    <h3>Second slide</h3>
    <p>Some other text</p>
  </div>
  <div class="single-slide" data-order="1">
    <h3>Third slide</h3>
    <p>Yet some other text</p>
  </div>
</div>

如果您想为 slider (或其他任何东西)设置动画，但为了可访问性目的，希望保持 HTML 中元素的顺序，这可能很有用，这是 order 属性的有用用法之一。参见 https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Flexible_Box_Layout/Ordering_Flex_Items#The_order_property_and_accessibility