animate createElement

by Tom M

HTML

<div id='container'>

</div>
<select>
<option>Red</option>
<option>Green</option>
<option>Blue</option>
</select>
<button>
Grow
</button>

CSS

#container {
  width: 100%;
  height: 90vh;
}

.bar {
  width: 25%;
  height: 0%;
  background-color: red;
  transition: 2s;
}

JavaScript

let select = document.querySelector('select');
let container = document.querySelector('#container');

let button = document.querySelector('button');

function makeBar() {
	container.innerHTML = '';
  let element = document.createElement('div');
  element.classList.add('bar');
  element.setAttribute('class', 'bar');
  element.style.backgroundColor = select.value; 
  container.appendChild(element);
}

 select.addEventListener('change', function() {
 	makeBar();
 })  




select.addEventListener('change', function() {
   let bar = document.getElementsByClassName('bar')[0];
   window.requestAnimationFrame(() => {
   bar.style.height = '75%';
   });
 })  

  
	/* 
 button.addEventListener('click', function() {
   let bar = document.getElementsByClassName('bar')[0];
   bar.style.height = '75%';
 })
*/