TypeScript

by brigand

HTML

<div id="container">
    <div class="box blue"></div>
    <div class="box red"></div>
    <div class="box green"></div>
  </div>
  <button type="button">Shuffle</button>

CSS

* {
  padding: 0;
  margin: 0;
}
.box {
  width: 100px;
  height: 100px;
  display: inline-block;
}

.animate {
  
  margin-left: -100px;
  transition: margin-left 1s;
}

.blue { background: blue; }
.red { background: red; }
.green { background: green; }

JavaScript

const TRANSITION_TIME = 1000;

const button = document.querySelector('button');
const container = document.getElementById('container');
const boxes  = document.querySelectorAll('.box');

function randomCount() {
	return Math.floor(Math.random() * 3) + 2;
}

function animate() {
	let remaining = randomCount();
  
  
}

button.addEventListener('click', () => {

	remove();
});

boxes.forEach((box) => box.addEventListener('transitionend', (event) => {
	event.target.classList.remove('animate');
	container.appendChild(event.target)
}))

function remove() {

	container.children[0].classList.add('animate');
}