Как плавно скрыть элемент при помощи значения visibility

Question

У меня появилась такая проблема когда проходит время выполняется функции с этим проблем нет. Но когда я скрываю элемент при помощи значения visibility: hidden; происходит резкая анимация исчезновения. А мне нужно чтобы это было плавно. Помоги пожалуйста. Если вопрос показался тупым то извините.

Answer 1

function hide(){
  document.querySelector('.block').classList.toggle('hide');
}

  .block{
    width: 50px;
    height: 50px;
    background:red;
    opacity:1;
    visibility: visible;
    transition: all .2s linear;
  }
  
  .hide{
    opacity:0;
    visibility: hidden;
    transition: all .2s linear;
  }

<div onclick = 'hide()' class = 'block'>
</div>

<button onclick = 'hide()' > hide </button>

БЛОГ НА HUSL

Как плавно скрыть элемент при помощи значения visibility

Ответы (1 шт):