Request animation expando

by amindunited

HTML

<div class="main">
  <div class="container">
    <div class="content">
      <ul>
        
      </ul>
    </div>
    
      <div class="trigger">
        Trigger
      </div>
  </div>
</div>

CSS

body {
  height: 320px;
}
ul {
  height: 0;
  overflow: hidden;
}
ul.open {
  height: auto;
}
ul.open li {
  background-color: rgba(255, 255, 0, .5);
}
/* Just for looks */
html, body {
  font-family: Helvetica;
  color: #666666;
}
ul {
  list-style-type: none;
  margin: 0;
  padding: 0;
}

li {
  padding: 10px 25px;
  background-color: white;
  border-bottom: solid 2px #efefef;
}

.trigger {
  padding: 10px 25px;
  text-align: center;
  border-bottom: solid 2px #efefef;
}

JavaScript

var numberOfElements = 10;
var time;
var loops = 0;
var trigger = document.querySelector('.trigger');
var ul = document.querySelector('ul');
var finalUlHeight = 0;
var pageHeight = 0;

function estimateHeights () {
	//get ul hight
  var li = document.querySelector('li');
  //show it here
  var liHeight = li.offsetHeight;
  //hide it here
  console.log('offsetHeight of ', liHeight);
  finalUlHeight = liHeight * numberOfElements;
  
  //getPageHeight
	var page = document.querySelector('body');
  pageHeight = page.clientHeight;
	console.log('page height ', pageHeight);
  
}

function expand () {
		var currentUlHeight = ul.offsetHeight;
    if ( loops <= 50 && currentUlHeight <= finalUlHeight && currentUlHeight <= pageHeight ) {
    	loops++;
    	requestAnimationFrame(expand);
    }
    else {
    	alert('animation Done!');
      ul.classList.add('open');
      ul.style.height = '';
    	return;
    }
    var now = new Date().getTime(),
        dt = now - (time || now);
 
    time = now;
 
    // Drawing code goes here... for example updating an 'x' position:
    //trigger.style.left = (loops*10)+'px';
    ul.style.height = (loops*10)+'px';
}

function collapse() {
  var currentUlHeight = ul.offsetHeight;
	if (currentUlHeight > 0) {
	  requestAnimationFrame(collapse);
  } else {
		ul.classList.remove('open');
		return;
  }

  var now = new Date().getTime(),
      dt = now - (time || now);

  time = now;
  console.log("currentUlHeight", currentUlHeight);
  ul.style.height = (currentUlHeight-10)+'px';

}

function startAnimation () {
	estimateHeights();
  if (ul.classList.contains('open')) {
  console.log('is open');
  	collapse();
  } else {
  	expand();
  }
  //
}

trigger.addEventListener('click', startAnimation);

/**
	Create List elements
*/
var content = document.querySelector('.content');
var ul = document.querySelector('.content ul');

function createListElement (content) {
	var newListElement = document.createElement('li');
  newListElement.innerHTML =...