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页面上的'animatable'是指CSS还是JavaScript？

Answer 1

是。 order是可动画的。

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

＆＃13;

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

＆＃13;

.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;
}

＆＃13;

<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>

＆＃13;

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

注意Chrome似乎不支持它，但适用于Firefox。

flex项目的顺序是否可动画？

1 个答案: