Добавление перехода в меню show-hide

Question

У меня есть довольно простое меню, которое работает по назначению, но я просто не знаю, как добавить переход к нему, чтобы он выглядел более гладко. Вот что у меня есть:

<script type="text/javascript"> 
function showhide(id) { 
    var e = document.getElementById(id); 
    e.style.display = (e.style.display == 'block') ? 'none' : 'block'; 
    e.style.transition = "all 1s"; 
} 
</script> 


<a href="javascript:showhide('SERIES')"> 
    <div class="search-menu-maincategory"> 
     Maincategory to click on 
    </div> 
</a> 

<div id="SERIES"> 
    <div class="search-menu-subcategory"> 
     One of the subcategories to show and hide 
    </div> 
</div> 

Очевидно, что e.style.transition = "all 1s"; часть не то, что мне нужно, так как она не работает. Как добавить второй переход между показом и скрытием? Благодаря!

Answer 1

Две вещи: вы не можете перейти на свойство отображения, вместо этого используйте видимость и непрозрачность.

#foo { transition-property: visibility, opacity; transition-duration: 0, 1s; }

#foo.hidden { opacity: 0; visibility: hidden; transition-property: opacity, visibility; transition-duration: 1s, 0; transition-delay: 0, 1s; }

Я предлагаю использовать имена классов CSS для управления показа/скрытия в противном случае вам придется написать функцию, которая использует функцию запроса анимации кадра перерисовать окно, так что анимация фактически показывает вверх в противном случае вы не будете иметь переход https://developer.mozilla.org/en-US/docs/Web/API/window/requestAnimationFrame

Answer 2

Установка height: 0 должна устранить проблему BLOCK

function showhide(id) { 
 
    var e = document.getElementById(id); 
 
    e.classList.toggle("m-fadeOut"); 
 
}

.m-fadeOut { 
 
    visibility: hidden; 
 
    opacity: 0; 
 
    height: 0; 
 
    transition: visibility 0s linear 300ms, opacity 300ms, height 300ms; 
 
}

<a href="javascript:showhide('SERIES')"> 
 
    <div class="search-menu-maincategory"> 
 
     Maincategory to click on 
 
    </div> 
 
</a> 
 

 
<div id="SERIES"> 
 
    <div class="search-menu-subcategory"> 
 
     One of the subcategories to show and hide 
 
    </div> 
 
</div>