SO - 38631302

HTML

<button>Start</button>
<div class="x"></div>

CSS

.x {
  height: 50px;
  background-color: blue;
  display: none;
  opacity: 0;
  transition: opacity 3s;
}

.element__displayed {
  display: block;
}

.element__visible {
  opacity: 1;
}

JavaScript

function x() {
  console.log(this)
    //This line makes the element displayed as block from none
    //but at this point it has an opacity value of 0
  this.addClass('element__displayed');

  //here i am waiting a frame so that the previously added
  //display value takes effect
  window.requestAnimationFrame(function() {
    //adding opacity: 1 for fade effect
    window.requestAnimationFrame(function() {
	    this.addClass('element__visible');
    }.bind(this))
  }.bind(this));
}

$('button').click(function() {
  x.call($('.x'))
})