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

Question

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？

Answer 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 上运行。