Add node with transition

by mtkastner

HTML

<div id="wrap"></div>

CSS

#wrap {
  text-align: center;
  background-color: #eeeeee;
  display: block;
  height: 0px;
  width: 300px;
  transition: all 2s ease-in;
  overflow: hidden;
}

#wrap:not(:empty) {
  height: 100px;
}

JavaScript

var div = document.createElement('div');
div.innerHTML = 'Surprise';

var wrap = document.querySelector('#wrap');
wrap.appendChild(div);