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>

添加转换到show-hide菜单

2 个答案: