如何用动画隐藏和显示元素？

Question

现在Bootstra5已经放弃了jQuery，我正在进行一个项目，并使用标准JS“瘦身”。然而，有一部分我使用jQuery来提供一个转换效果，使用：

$('#form-1').hide('slow');
$('#form-2').show('slow');

我可以使用以下方法将其替换为标准JS：

document.querySelector('#form-1').style.display = 'none';
document.querySelector('#form-2').style.display = 'block';

然而，这导致了一个即时的转换:(是否有一种方法可以使用标准的JS来减缓转换？

注意:效果不是褪色，也不是滑进或滑出表单，但它组合的表单具有类似于构建的效果。也就是说，这不是不透明的变化，也不是动画的运动效果。顺便说一句，我还想看看是否有人知道一个相当于上一个jQuery的JS，而不是添加一些CSS。

Answer 1

我做了一个快速的功能，希望它有助于确保通过的高度和宽度。它慢慢地使不透明度0，高度和宽度0。

function hideSlowly(element, width, height){
  let el = document.querySelector(element);
  el_opacity = 1;
  el_h = parseInt(height);
  el_w = parseInt(width);
  let s = setInterval(function(){
    el.style.opacity = el_opacity;
    el_opacity -= 0.2;
    el.style.height = el_h + "px";
    el_h -= 2;
    el.style.width = el_w + "px";
    el_w -= 2;
      if(el_opacity <= 0){
    el.style.display = "none";
    // hide the element
    // opacity is 0 and element is hidden so clear interval
    clearInterval(s)
  }
  }, 100)
}

https://jsfiddle.net/9hjstuq7/这里是一个例子

Answer 2

来自：CSS display none and opacity animation with keyframes not working

我在下面设置为一个使用css的onhover事件。

​

#form-1:hover {
  animation: 3s fadeOut;
  -webkit-animation: 3s fadeOut;
}

@keyframes fadeOut {
  0% {
    opacity: 1;
  }
  99% {
    opacity: 0;
    z-index: 1;
  }
  100% {
    opacity: 0;
    display: none;
    position: fixed;
    z-index: -5;
  }
}

<form id="form-1">
  it's like totally a form broooooooooooooo
</form>

​