CSS Transition Flyout

without setTimeout

by b9chris

HTML

<button id=button>Fade it</button>

<div id="box" class="hidden">Lorem</div>

SCSS

div.hidden {
  display: none;
}
#box {
  transition: opacity 1s;
  
  background: #8cf;
  width: 100px; height: 100px;
}



// Niceties - unimportant to example

#button {
  display: block;
  margin-bottom: 1em;
  cursor: pointer;
}

body {
  font: normal 10pt Verdana;
}

JavaScript

// Brass9 utilities  Library
$.fn.noTrnsn = function () {
    return this.each(function (i, tag) {
        tag.style.transition = 'none';
    });
};
$.fn.resumeTrnsn = function () {
    return this.each(function (i, tag) {
        tag.offsetHeight;    
        tag.style.transition = null;
    });
};
// /Library

$('#button').on('click', function() {
    var tag = $('#box');
    if (tag.hasClass('hidden'))
        tag.noTrnsn().removeClass('hidden')
        .css({ opacity: 0 })
        .resumeTrnsn().css({ opacity: 1 });
    else
        tag.css({ opacity: 0 });
});