Flexbox animated grow element

Flexbox animated grow element

by Emanuel Vecchio

HTML

<div id="flexbox">
  <div class="flexed expand-me">
    <div class="grow">
    A
    </div>
  </div>
  <div class="flexed expand-me">
    <div class="grow">
    B
    </div>
  </div>
  <div class="flexed expand-me">
    <div class="grow">
    C
    </div>
  </div>
</div>

CSS

#flexbox {
  padding: 40px;
  display: flex;
  flex-flow: row;
}

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

.grow {
  background: rgba(255,0,0,0.1);
  width: 100%;
  height: 100%;
  transition: all 250ms linear;
  transform: perspective(1000px) translateZ(0);
  font-smoothing: subpixel-antialiased;
}

.expanded > .grow {
  transform: perspective(1000px) translateZ(200px);
}

.expanded {
  flex: 3 1 auto;
}

JavaScript

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

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

node.forEach(x => x.addEventListener('mouseleave', function(evt) {
  this.classList.remove('expanded');
}, false));