Как добавить анимацию перехода к этому DIV TOGGLE Hid / Show?

Question

У меня есть это погружение, переключатель Hide / Show !! ... Это работает нормально, но я хотел бы знать, как добавить анимацию перехода в скрыть / показать?

это мой JS:

function myFunction() {
var x = document.getElementById("clock1");
if (x.style.display === "none") {
    x.style.display = "block";
} else {
    x.style.display = "none" ;

}

Answer 1

Установка display на none немедленно скрывает элемент, что означает, что нет возможности для анимации / перехода видимости во времени.

Возможно, вы могли бы вместо этого использовать opacity для достижения этой цели?

Добавьте следующий CSS:

#clock1 {
  transition:opacity 1s;
}

Обновите свой JS:

function myFunction() {
  var x = document.getElementById("clock1");
  // Update opacity rather than display       
  if (x.style.opacity === "0") {
      x.style.opacity = 1; 
  } else {        
      x.style.opacity = 0;   
  }
}

Работает jsFiddle здесь

Answer 2

Вы не можете анимировать свойство display. Но вы можете легко анимировать свойство visibility или opacity в css:

// main.html
<div id="clock1" class="hidden">...</div>

// main.css
#clock1 {
    visibility: visible;
    opacity: visible;
    transition: visibility 0s, opacity 0.5s linear;
}
#clock1.hidden {
    visibility: hidden;
    opacity: 0;
}

// main.js
function myFunction() {
  var x = document.getElementById("clock1")
  if (x.classList.contains('hidden')) {
    x.classList.remove('hidden')
  } else {
    x.classList.add('hidden')
  }
}