Каждые 5 секунд ячейки с числами перемешиваются случайным образом
Каждые 5 секунд ячейки с числами перемешиваются случайным образом. Ячейка с числом должна двигаться в свое новое место плавно. Организовать перемешивание получилось, а вот как сделать это плавно, не могу понять.
const cards = document.querySelectorAll('.table-grid__item');
function shuffle() {
console.log('randomCard')
cards.forEach(card => {
let ramdomPos = Math.floor(Math.random() * 8);
card.style.order = ramdomPos;
});
}
setInterval(() => shuffle(), 5000)
.table-grid {
display: grid;
grid-template-columns: repeat(2, minmax(81.25px, 130px));
grid-template-rows: repeat(4, minmax(81.25px, auto));
align-items: stretch;
justify-items: stretch;
background: silver;
transition: 1s;
}
.table-grid__item {
display: flex;
align-items: center;
justify-content: center;
border: 2px solid #edd3ea;
box-sizing: border-box;
color: #ffff80;
font-family: Roboto;
font-style: normal;
font-weight: bold;
font-size: 48px;
line-height: 56px;
cursor: pointer;
transition: 1s;
}
<section class="table-grid">
<div class="table-grid__item">1</div>
<div class="table-grid__item">2</div>
<div class="table-grid__item">3</div>
<div class="table-grid__item">4</div>
<div class="table-grid__item">5</div>
<div class="table-grid__item">6</div>
<div class="table-grid__item">7</div>
<div class="table-grid__item">8</div>
</section>