如何使div打开/关闭缓慢？

div {
  display: none;
  transition: opacity 0.5s;
}

var div = document.querySelector('div');
var button = document.querySelector('button');

button.addEventListener('click', function() {
  if (div.style.display === 'none') {
    div.style.display = 'block';
    setTimeout(function() {
      div.style.opacity = '1';
    }, 10);
  } else {
    div.style.opacity = '0';
    setTimeout(function() {
      div.style.display = 'none';
    }, 500);
  }
});