javascript - 使用过渡更改 CSS Grid 元素的顺序时出现奇怪的行为，如何解决？

Question

我想通过单击按钮来更改网格容器内元素的顺序。我只是给子元素一个过渡属性，结果太奇怪了。

首先，过渡的时间值和实现它所需的实际时间之间的时间是完全错误的，而且它以奇怪和随机的顺序发生在许多阶段，最后也是最重要的是没有过渡效果或什么的曾经。

这是我的代码片段：

function changeOrder(){
var elmnts = document.querySelectorAll(".container>div");
  elmnts.forEach((item, i) => {
   item.style.order = 5 - i;
  });
}

.container{
  max-width: 1000px;
  margin: 0 auto;
  display: grid;
  grid-template-columns: repeat(auto-fill, 150px);
  grid-column-gap: 4px;
  grid-row-gap: 24px;
  justify-content: center;
  padding: 25px;
}
.container > div {
  width: 150px;
  height: 150px;
  background: red;
  color: white;
  display: flex;
  flex-flow: column nowrap;
  justify-content: center;
  align-items: center;
  transition: order 20s;
}

<div class="container">
  <div>1</div>
  <div>2</div>
  <div>3</div>
  <div>4</div>
</div>
<button type="button" name="button" onclick="changeOrder()">Change order</button>

那么有没有办法实现这一点，当元素由于其顺序值的变化而从一个位置移动到另一个位置时给出运动感？

标签： javascriptcsscss-transitionscss-grid