在 flexbox 订单上使用过渡

Question

有什么方法可以对弹性盒项目的顺序进行转换？

换句话说，我可以拥有这个（详情在这个fiddle）

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

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

Answer 1

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

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

• 在 HTML 中，为元素添加 data-order 属性
• 为每个元素位置添加 CSS 属性
• 使用 Javascript 更改 data-order
• 使用 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>

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

Answer 2

这个问题现在很老了，但我最近使用这个 Fiddle 测试了这个问题（改编自 Jason 在评论中发布的问题）：http://jsfiddle.net/aqrxcd1u/（代码如下）。

在 Chrome 和 Firefox 中，这部分动画，因为顺序从当前值一次转换为目标值。这意味着它不是从 5->1 开始，而是从 5->4->3->2->1 开始。

在桌面 Safari 中，它仍然是 5->1 直接。

#container {
    display: flex;
}
#container div {
    width: 100px;
    height: 100px;
    margin-right: 10px;
    background-color: red;    
}
#container div:nth-child(even) {
    background-color: blue;
}
}
#container div:last-child {
    order: 5;
    transition: order 1s;
}
#container:hover div:last-child {
    order: -1 !important;
}

<div id="container">
    <div style="order: 1">Element 1A</div>
    <div style="order: 2">Element 2B</div>
    <div style="order: 3">Element 3C</div>
    <div style="order: 4">Element 4D</div>
    <div style="order: 5">Element 5E</div>
</div>

Answer 3

正如 Emil 所说，它仅作为整数进行动画处理。但是，我正在考虑一个 hack：

• 用height的1/10将要显示的元素放入一个包装器中，设置包装器overflow: visible
• 然后使用相同的height 在这些包装器之间放置 9 个间距元素。
• 将order 和transition 全部放在上面。
• 更改包装器的order 并观察它“过渡”。

很遗憾，它很丑，只能在 Firefox 中使用。 Here is what I tested in Angular

Answer 4

遗憾的是，订单属性是可动画的，但只能作为整数。这意味着对于动画的每个步骤/帧，它将通过地板对最近的整数进行插值。所以项目只会出现在计算出的整数值产生的槽中，不会以任何平滑的运动方式出现在中间。

从技术上讲，它仍然是一个动画：计算出的整数位置仍然应该遵循动画的计时函数和关键帧规则，只是项目随着它们的变化从一个位置“跳跃”到另一个位置。

见https://developer.mozilla.org/en-US/docs/Web/CSS/integer#Interpolation