如何将过渡效果添加到JavaScript切换菜单？

Question

我想给一个简单的JavaScript切换移动菜单一个平滑的过渡效果（如轻松的变色或淡入淡出）。

我已经尝试过通过CSS Transition效果来实现它，但是没有运气，但是我确信它可以通过CSS或JavaScript来实现。 我认为除非有可能，否则使用CSS会更好。

这是代码：

var toggle  = document.getElementById("toggle");
var content = document.getElementById("content");

toggle.addEventListener("click", function() {
  content.style.display = (content.dataset.toggled ^= 1) ? "block" : "none";
});

#content{
  display:none;
}

<button id="toggle">TOGGLE</button>
<div id="content">Some content...</div>

内容应平滑显示/隐藏，并具有淡入淡出效果。 这怎么可能？

Answer 1

这是您需要的解决方案。 jQuery使您的任务轻松易懂。

 var toggle = document.getElementById("toggle"); var content = document.getElementById("content"); $(document).ready(function(){ $("#toggle").click(function(){ $("#content").fadeToggle("slow"); /* $("#div3").fadeOut(3000); */ }); }); 

 #content { width:80px; height:80px; background-color:blue; } 

 <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <button id="toggle">TOGGLE</button> <div id="content">Some content...</div> 

Answer 2

您无法为显示设置动画display: none ，因为您已完全删除了元素。 相反，您可以尝试使用visibility: visible的组合visibility: visible > visibility: hidden和opacity: 1 > opacity: 0 。