在flexbox订单上使用转换

Question

有没有办法在flex-box项目的顺序上进行转换？

换句话说,我可以有这个(在这个细节小提琴)

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

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

Answer 1

我并没有真正回答这个问题，因为我没有使用 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

Answer 2

遗憾的是:order属性是可动画的,但仅作为整数.这意味着对于动画的每个步/帧,它将通过拼接到neareast整数来插值.因此,项目将仅显示在计算的整数值导致的槽中,而不会以任何平滑的运动方式介于其间.

它在技术上仍然是一个动画:计算的整数位置应该仍然遵循动画的计时功能和关键帧规则,只是项目在它们改变时从一个位置"跳跃"到另一个位置.

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

Answer 3

这个问题现在已经过时了，但我最近使用这个 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>