Divs анимация внутри контейнера flexbox

Question

Возможно ли анимировать flexbox после изменения "порядка" div? Я много искал в Интернете, но не нашел никакого решения. Я только что нашел "-webkit-animation: замедление .6s замедление;" которые вызывают скольжение вниз для всех предметов. Результат, который я получу sh, заключается в том, что текущий div перемещается (с анимацией) на новую позицию, автоматически рассчитывается браузером и изменяет свой атрибут order. Я имею в виду: если текущий div (order: 3) находится в (0,0), я меняю его порядок, нажимая кнопку, которая устанавливает «order: 6». Теперь flexbox автоматически переместит текущий div в новую позицию (например, (10,5)). Возможно ли оживить этот сдвиг? Заранее спасибо. (Контейнерный блок имеет несколько строк и столбцов, поэтому он может смещаться как вверх, так и вниз, а также вправо и влево). Заранее спасибо.

Answer 1

I w sh для анимации элементов 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>