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

【问题标题】：How to add Transition Effects to JavaScript toggle menu?如何将过渡效果添加到 JavaScript 切换菜单？
【发布时间】：2019-04-24 12:22:38
【问题描述】：

我想为一个简单的 JavaScript 切换移动菜单提供平滑的过渡效果（如缓入或淡出）。

我尝试过通过 CSS 过渡效果来实现它，但没有运气，但我确信它可以通过 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>

内容应该平滑地显示/隐藏，轻松淡入或淡入/淡出效果。怎么可能？

【问题讨论】：

你不能淡入/淡出display:none。您必须转换 opacity 才能使其淡化。您可以使用另一种技术来模仿display:none，例如left:-300vh，并稍微延迟不透明度过渡。

标签： javascript css

【解决方案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>

【讨论】：

不，我不能添加 jQuery。对不起！
我需要现有代码或类似 JavaScript 代码的解决方案。

【解决方案2】：

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

【讨论】：