弹性项目的订单是不是可动画？

Posted 2023-03-06

【中文标题】弹性项目的订单是不是可动画？

【英文标题】：Is flex items' order animatable?弹性项目的订单是否可动画？

【发布时间】：2015-04-22 17:24:00

【问题描述】：

https://developer.mozilla.org/en-US/docs/Web/CSS/order 页面上显示“是”。

虽然我自己尝试，但它们不会动画。当上面的页面说属性“订单”是可动画的时，我是不是误解了？

$('.flex-item').click(function() 
  var offset = $(this).css('order') - 3;
  $('.flex-item').each(function() 
    var current = $(this).css('order');
    var checker = current - offset;
    var des;
    if (checker < 1) des = checker + 5;
    else if (checker > 5) des = checker - 5;
    else des = checker;
    $(this).css('order', des);
  );
);

.flex-container 
  display: flex;
  transition: all 5s ease

.flex-item 
  width: 60px;
  height: 60px;
  border: solid 1px black;
  transition: all 5s ease

.a 
  order: 1;
  background: yellow

.b 
  order: 2;
  background: red

.c 
  order: 3;
  background: blue

.d 
  order: 4;
  background: green

.e 
  order: 5;
  background: black

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="flex-container">
  <div class="flex-item a">1</div>
  <div class="flex-item b">2</div>
  <div class="flex-item c">3</div>
  <div class="flex-item d">4</div>
  <div class="flex-item e">5</div>
</div>

此外，从我的这个问题中，您可以看出我对 jQuery 动画和 CSS 动画感到困惑。如果两者都有效，那么谁在实际执政？什么是优先规则？ mdn 页面上的“动画”是指 CSS 还是 javascript？

【问题讨论】：

好问题。能在这里得到一个漂亮的过渡动画会很高兴

【参考方案1】：

是的。 order 是可动画的。

但是，在您的 sn-p 中，您更改了所有元素的 order，因此可能很难看到发生了什么。尝试单击以下小提琴中的最后一项：

$('.flex-item').click(function() 
  $(this).css('order', '0');
);

.flex-container 
  display: flex;

.flex-item 
  width: 60px;
  height: 60px;
  border: solid 1px black;

.transition > .flex-item 
  transition: all 5s linear;

.a 
  order: 1;
  background: yellow;

.b 
  order: 2;
  background: red;

.c 
  order: 3;
  background: blue;

.d 
  order: 4;
  background: green;

.e 
  order: 5;
  background: black;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<p>Click a box. It will be moved to the beginning.</p>
With transition:
<div class="flex-container transition">
  <div class="flex-item a">1</div>
  <div class="flex-item b">2</div>
  <div class="flex-item c">3</div>
  <div class="flex-item d">4</div>
  <div class="flex-item e">5</div>
</div>
With no transition:
<div class="flex-container">
  <div class="flex-item a">1</div>
  <div class="flex-item b">2</div>
  <div class="flex-item c">3</div>
  <div class="flex-item d">4</div>
  <div class="flex-item e">5</div>
</div>

动画时，单击的项目应逐步后退到开头。如果没有动画，它会立即移动。

注意 Chrome 似乎不支持它，但可以在 Firefox 上运行。

【讨论】：

我在 Chrome 40.0.2214.115 或 Firefox 34.0.5 中看不到此功能

在 ios 7 上的 Safari 中什么都不做（尽管 Stack Snippets 和 JS Fiddle 等人在 iOS 7 Safari 中都有点碰巧......）。

根据规范，这个属性应该是可动画的：w3.org/TR/css3-flexbox/#order-property 但看起来浏览器可能还不支持。

目前仍然无法使用 (chrome 58.0.3029.110)