function expand() {
  const elm = document.querySelector('.dropdown__content');

  elm.style.position = 'absolute';
  elm.style.visibility = 'hidden';
  elm.style.display = 'block';

  const height = elm.offsetHeight;

  elm.classList.add('collapsing');
  elm.classList.remove('collapse');

  elm.style.position = null;
  elm.style.visibility = null;
  elm.style.display = null;

  elm.addEventListener('transitionend', function(e) {
      console.log('done', e.propertyName);
      elm.style.height = null;
      elm.classList.remove('collapsing');
      elm.classList.add('show');
  }, false);

  elm.style.height = `${height}px`;
}

.dropdown__content {
  border: 1px solid black;
  border-radius: 20px;
  padding: 20px;
  width: 600px;
  display: block;
}
.collapse:not(.show) {
  display: none;
}
.collapsing {
  height: 0;
  overflow: hidden;
  transition: height 2s ease;
}

<a href="javascript:void(0)" onclick="expand()">Expand</a>
<div class="dropdown__content collapse">
  <p>dsdasdsad</p>
  <p>dsdasdsad</p>
  <p>dsdasdsad</p>
</div>