Как добавить эффекты перехода в меню переключения JavaScript?

Question

Я хочу придать эффект плавного перехода (например, облегчение или ослабление) в простом мобильном меню с переключателем 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>

Содержимое должно быть плавно отображать / скрывать с легким эффектом уменьшения или уменьшения. Как это возможно?

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.