JSFiddle - React, Tailwind, and code Playground

by BurpmanJunior

HTML

<div id="box1" class="box" style="background-color: #f00;"></div>
<div id="box2" class="box" style="background-color: #0f0; display: none;"></div>
<div id="box3" class="box" style="background-color: #00f;"></div>

<div id="test">
  <p>Nam eget dui. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Duis lobortis massa imperdiet quam. Quisque id mi. Quisque ut nisi.</p>

  <p>Aenean tellus metus, bibendum sed, posuere ac, mattis non, nunc. Nunc sed turpis. Pellentesque ut neque. Quisque id odio. Phasellus viverra nulla ut metus varius laoreet.</p>

  <p>Morbi mattis ullamcorper velit. In auctor lobortis lacus. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Sed aliquam, nisi quis porttitor congue, elit erat euismod orci, ac placerat dolor lectus quis orci. Aenean tellus metus, bibendum sed, posuere ac, mattis non, nunc. Phasellus volutpat, metus eget egestas mollis, lacus lacus blandit dui, id egestas quam mauris ut lacus.</p>
</div>

CSS

.box{
  background-color: #999;
  width: 10em;
  height: 10em;
  margin: 1em;
  float: left;
}

#test{
  clear: both;
  display: none;
}
p{
  margin: 0 0 15px 0;
}

JavaScript

/**
 * Vanilla JS block fade and slide
 */


/**
 * Fade in/out with duration and callback settings
 * @param  {string}   direction in|out
 * @param  {object}   element   DOM node
 * @param  {number}   duration  Animation in ms
 * @param  {function} fn        Callback (with element as scope)
 * @return {boolean}
 */
function _fade(direction, element, duration, fn){
	var timingStep = 17,
      modStep,
      callback,
      modShift;
      
  // Prevent propagation
  if(element.getAttribute('data-fade')){
    return false;
  }
  element.setAttribute('data-fade', true);

  // Direction
  if(direction != 'out'){
    direction             = 'in';
    element.style.display = 'block';
  }

  // Set default opacity
  if(!element.style.opacity){
    element.style.opacity = (direction == 'in' ? 0 : 1);
  }

  // Duration
  if(typeof duration !== 'number'){
    duration = 300;
  }
  duration = Math.abs(duration);
  modStep  = 1 / (duration / timingStep);

  // Callback
  callback = function(){
    element.removeAttribute('data-fade');
    if(typeof fn === 'function'){
      fn.call(element);
    }
  }

  // Modifier
  modShift = function(){
    if(direction == 'in'){
      // In
      element.style.opacity = Math.min(1, parseFloat(element.style.opacity) + modStep);
      if(element.style.opacity >= 1){
        // Done
        element.style.opacity = '';
        callback();
        return true;
      }
    }else{
      // Out
      element.style.opacity = Math.max(0, element.style.opacity - modStep);
      if(element.style.opacity <= 0){
        // Done
        element.style.display = 'none';
        element.style.opacity = '';
        callback();
        return true;
      }
    }
    setTimeout(modShift, timingStep);
  }

  // Trigger
  modShift();
}


/**
 * Slide up/down with duration and callback settings
 * @param  {string}   direction up|down
 * @param  {object}   element   DOM node
 * @param  {number}   duration  Animation in ms
 * @param  {function} fn       ...