我有一个相当简单的菜单,可以按预期工作,但我只是不知道如何向其添加过渡效果,因此看起来更平滑。这是我所拥有的:
<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 =“全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
关于javascript - 向显示隐藏菜单添加过渡,我们在Stack Overflow上找到一个类似的问题:https://stackoverflow.com/questions/39419782/