33

有什么方法可以对 flex-box 项目的顺序进行转换？

换句话说，我可以拥有这个（this fiddle中的详细信息）

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

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

4

4 回答 4

22

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

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

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

于 2014-08-31T15:39:53.837 回答
21

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

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

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

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

于 2019-02-04T13:18:52.910 回答
5

这个问题现在很老了，但我最近使用这个 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>
于 2019-09-14T14:46:13.517 回答
2

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

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

可悲的是，它很丑陋，只能在 Firefox 中使用。 这是我在 Angular 中测试的内容

于 2016-01-05T11:25:08.110 回答