JSFiddle - React, Tailwind, and code Playground

by Kate Masiuk

HTML

<div class="main_block" id="up">
  <div>1</div>
  <div>2</div>
  <div data-change="true">3</div>
  <div data-change="true">4</div>
</div>
<div class="secondary_block" id="down">
  <div data-change="true">5</div>
  <div data-change="true">6</div>
  <div data-change="true">7</div>
  <div data-change="true">8</div>
</div>

CSS

.main_block,
.secondary_block {
	width: 400px;
	height: 50px;
	overflow: hidden;
	clear: both;
}

.main_block div,
.secondary_block div {
	width: 100px;
	height: 50px;
	text-align: center;
	float: left;
	-moz-box-sizing: border-box;
	-webkit-box-sizing: border-box;
	box-sizing: border-box;
	border: 1px solid #ccc;
  padding-top: 17px;
  color: #fff;
}

.main_block div {
	background: green;
}
.secondary_block div {
	background: blue;
}

JavaScript

var upBlock = document.getElementById('up');
var downBlock = document.getElementById('down');
var cnt;

function getRandomElementChild(element){
  
  var elements = Array.prototype.filter.call(element.children, function(elem){
	return elem.dataset.change;
  });
  
  var childCount = elements.length;
  var random = Math.round(-0.5 + Math.random() * (childCount));
  
  return [
		  elements[random],
		  Array.prototype.indexOf.call(element.children, elements[random])
		 ];	 

};

function changeElement(a, b){
	
	var randomFromA = getRandomElementChild(a); 
	do { 
	  randomFromA = getRandomElementChild(a); 
	} while ( (randomFromA[1] === cnt)  );
	cnt = randomFromA[1];
	
	var randomFromB = getRandomElementChild(b);
	
	randomFromA[0].style = 'opacity: 0';
	randomFromB[0].style = 'opacity: 0';
	
	a.insertBefore(randomFromB[0], a.children[randomFromA[1]]);
	b.insertBefore(randomFromA[0], b.children[randomFromB[1]]);
	
	fadeIn(randomFromA[0]);
	fadeIn(randomFromB[0]);
	
};

function fadeIn(elem){
	var opacity = 0;
	
	setTimeout(function foo(){
		if(opacity < 1 ){
			opacity += 0.035;
			elem.style = 'opacity: '+opacity+
			setTimeout(foo, 25);
		};	
	}, 25);
};

setInterval(changeElement.bind(null, upBlock, downBlock), 2000);