向顯示隱藏菜單添加過渡

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應該可以解決您的塊問題

 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>