toggle vanilla js
 

Я принудительно использую таймеры который добавляют display:none.
Т.к без него скрытый блок мишает видимым объектам. Причина тому hidden { position:relative;
Если заменить его на position:absolute; Это поможет, но скрытие div тогда происходит не комильфо.

Может есть какие-то более красивые решения?

.hidden {
  opacity:0;
  position:relative;
  max-height:0px;
  margin:0 auto;
  transition:opacity .5s ease, margin .5s .3s ease, max-height .5s .2s ease;
}
.none {
 display:none !important;
}
.visible {
  opacity:1;
  position:relative;
  z-index:10;
  max-height:1800px;
  margin:20px auto;
  transition:opacity .5s .2s ease, margin .5s ease, max-height 1s ease;
}

function toggle(id){
element = document.getElementById(id);
if(element.classList.contains('visible')){
  element.classList.remove('visible');
  element.classList.add('hidden');
setTimeout(function(){
element.classList.add('none');
}, 500);
} else {
element.classList.remove('none');
setTimeout(function(){
element.classList.remove('hidden');
element.classList.add('visible');
}, 500);

}
}

<a href="#" nclick="toggle('form');return false;">toggle</a>
    <div id="form" class="none hidden">***<div>

dima85,
transitionend

FadeIn & FadeOut js