flexbox 容器内的 Divs 动画答案

【问题标题】：Divs animation inside a flexbox containerflexbox 容器内的 Divs 动画
【发布时间】：2020-07-24 02:14:52
【问题描述】：

在更改 div 的“顺序”后，是否可以为 flexbox 设置动画？我在网上搜索了很多，但没有找到任何解决方案。我刚刚发现“-webkit-animation: slide-down .6s ease-out;”这会导致所有项目下滑。我希望获得的结果是当前 div 滑动（带有动画）到它的新位置，由浏览器自动计算，改变它的“order”属性。我的意思是：如果当前 div (order: 3) 在 (0,0) 中，我通过单击一个按钮来更改其顺序，该按钮设置为“order: 6”。现在，flexbox 会自动将当前 div 移动到一个新位置（例如 (10,5)）。是否有可能为这种转变设置动画？提前致谢。（容器 div 有多个行和列，因此 div 可以上下左右移动）。提前致谢。

【问题讨论】：

不，那是不可能的。并且永远不会因为 css 的工作方式。你必须使用绝对位置或其他东西。
你的意思是在主容器中设置了一些 div 吗？你想为它们制作动画吗？你有任何示例代码来复制这种情况
是的，在改变他们的“订单”属性之后。
酷，请在这里上传一些示例，或者在 codepen、jsfiddle 或 codesandbox 上

标签： html css animation

【解决方案1】：

我希望在 div 改变位置时为其设置动画。

function sort()
{
  var childDivs = document.getElementById("container").getElementsByTagName('div');
  for( i=0; i< childDivs.length; i++ )
  {
    var childDiv = childDivs[i];
    childDiv.style.order = Math.round(Math.random()*10);
  }
}

.container
{
  display: flex;
  flex-wrap: wrap;
  border: 1pt black solid;
  width: 360px;
}
 
.element
{
  width: 100px;
  height: 100px;
  margin: 10px;
}

button
{
  height: 50px;
  width: 100px;
  margin: 20px 130px;
}

<button onclick="sort()">Mix</button>
<div class="container" id="container">
  <div class="element" style="background-color: yellow; order: 1">
  </div>
  <div class="element" style="background-color: blue; order: 2">
  </div>
  <div class="element" style="background-color: red; order: 3">
  </div>
  <div class="element" style="background-color: green; order: 4">
  </div> 
  <div class="element" style="background-color: pink; order: 5">
  </div> 
  <div class="element" style="background-color: purple; order: 6">
  </div> 
  <div class="element" style="background-color: turquoise; order: 7">
  </div> 
  <div class="element" style="background-color: gray; order: 8">
  </div> 
  <div class="element" style="background-color: orange; order: 9">
  </div> 
</div>

【讨论】：