Я принудительно использую таймеры который добавляют 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>
