Animate Display none Jquery

var box = $('#box');
$('button').on('click', function () {
  if (box.hasClass('hidden')) {
    box.removeClass('hidden');
    setTimeout(function () {
      box.removeClass('visuallyhidden');
    }, 20);
  } else {
    box.addClass('visuallyhidden');
    box.one('transitionend', function(e) {
      box.addClass('hidden');
    });
  }
});


.hidden {
  display: none;
}
.visuallyhidden {
  opacity: 0;
}