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: hidden和opacity: 1-> opacity: 0的组合。

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

2 个答案: