JSFiddle - React, Tailwind, and code Playground

by Bouteille Dimitri

HTML

<div class="container" id="container">
  <div class="content" style="background: #42A5F5">
    A
  </div>
  <div class="content is-active" style="background: #f9a825">
    B
  </div>
    <div class="content" style="background: #ba68c8">
    C
  </div>
      <div class="content" style="background: #ff1745">
     D
  </div>
</div>
<button id="change">
changer is-active
</button>

CSS

.container {
  display: flex;
  background: #000;
  transition: width 0.5s ease;
  width: 100%;
}
.content {
  color: #fff;
  flex: 1;
  transition: opacity 0.3s ease;
}
.content.is-active {
  opacity: 0.5;
}

JavaScript

let containerEl = document.getElementById('container')

let size = [50, 90,60,45,30],
currentSize = 0

change.addEventListener('click', (e) => {

  containerEl.addEventListener('transitionend', (e) => {
  
  if(event.propertyName === 'width' && event.target === containerEl) { 
  	
    updateActive() 
    }
  
  }, false)
    
  console.log(size[currentSize])
  containerEl.style.width = size[currentSize] + '%'
  
  currentSize++
  
})
function updateActive() {
let active = containerEl.querySelector('.is-active'),
    toActive = active.nextSibling ? active.nextElementSibling : container.firstElementChild
    active.classList.remove('is-active')
  toActive.classList.add('is-active')
  
}