Flexbox animated remove element

Flexbox animated remove element

by Emanuel Vecchio

HTML

<div id="flexbox">
  <div class="flexed remove-me"></div>
  <div class="flexed remove-me"></div>
  <div class="flexed remove-me"></div>
</div>

CSS

#flexbox {
  display: flex;
  flex-flow: row;
}

.flexed {
  border: 1px solid black;
  height: 100px;
  flex: 1 0 auto;
  transition: flex 250ms linear;
}

.clicked {
  flex: 0 0 auto;
}

JavaScript

var node = Array.from(document.querySelectorAll('.remove-me'));

node.forEach(x => x.addEventListener('click', function(evt) {
  this.classList.add('clicked');
}, false));

node.forEach(x => x.addEventListener('webkitTransitionEnd', function(evt) {
  document.querySelector('#flexbox').removeChild(this);
}, false));