jsFastHeight - DMF-EZ-COLLAPSE

Hopefully replaces force-re-flow problems with CSS class changes

by Nate Armstrong

HTML

<button onClick="document.getElementById('first').EZCollapse.growMe()">Grow first</button><br>
<br>
<button onClick="document.getElementById('second').EZCollapse.growMe()">Grow second</button><br>
<div id="first" data-toggle="DMF-EZ-collapse" style="height:0px;" class="test"><p>This is the first element</p></div>
<div id="second" data-toggle="DMF-EZ-collapse" style="height:0px;" class="test"><p>This is the second element</p></div>
<br>currentInt: <span id="currentInt"></span>
<br>targetInt: <span id="targetInt"></span>
<br>difference: <span id="difference"></span>

CSS

.test{
  display:block;
  overflow:hidden;
}

.test p {
  padding:100px;
}

#first{
  background-color:red;
  opacity:0.5;
}

#second{
  background-color:blue;
  opacity:0.5;
}

JavaScript

(function (root, factory) {
  if (typeof define === 'function' && define.amd) {
    // AMD support:
    define([], factory);
  } else if (typeof module === 'object' && module.exports) {
    // CommonJS-like:
    module.exports = factory();
  } else {
    // Browser globals (root is window)
    var DMFEZ = factory();
    root.EZCollapse = DMFEZ.EZCollapse;
  }
}(this, function () {
  "use strict";
  
  var globalObject = typeof global !== 'undefined' ? global : this||window,
    HTML = document.documentElement,
    stringEZCollapse = 'EZCollapse',
    dataToggle     = 'data-toggle',
    dataTarget     = 'data-target',
    isAnimating    = 'isAnimating',
    self           = this,
    counter = 0,
    collapse       = null;

  var queryElement = function (selector, parent) {
    var lookUp = parent ? parent : document;
    return typeof selector === 'object' ? selector : lookUp.querySelector(selector);
  }

    // event attach jQuery style / trigger  since 1.2.0
  var on = function (element, event, handler) {
    element.addEventListener(event, handler, false);
  }
  
  var DMFEZ = globalObject.DMFEZ = {};
  var supports = DMFEZ.supports = [];
  DMFEZ.version = '2.0.25';  //IDK what this is for
  
  var limit = 100;
  var speed = 5;
    
  // COLLAPSE DEFINITION
  // ===================
  var EZCollapse = function( element, options ) {
    element = queryElement(element);
    
    this.limit = limit;

this.report = function(){console.log(this.five);}
    
    this.growMe = function(){
      let duration = 1000;
      let distance = 300; // pixels    
      let lockout = 1;
      let start = null;
      
			function growHeight(timestamp){
				if (!start) start = timestamp;
  			let stopwatch = timestamp - start;
        let progress = (stopwatch / duration).toFixed(2);
        element.style.height = (distance * progress).toFixed(2) + 'px';
          console.log('start:' + start); 
					console.log('timestamp:' + timestamp);
					console.log('stopwatch:' +...