How can I hide and show elements with animation?

Question

Now that Bootstrap 5 has dropped jQuery I am going through a project and 'slimming it down' with standard JS. However there is one part where I was using jQuery to provide a transition effect using:

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

I can replace this with standard JS using:

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

However, this results in an instant transition :( Is there a way to slow the transition using standard JS?

Note: the effect was not to fade or to slide in or out the forms but it assembled the forms with a build like effect. I.e. this was not a change in opacity nor was it an animated motion effect. BTW I'm also looking to see if anyone knows of a JS equivalent to the previous jQuery rather than adding some CSS.

You code a function that does it with timeouts or you code a CSS class that does it. — epascarello, Jun 01 '22 at 18:06
[CSS animations](https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Animations/Using_CSS_animations). — Andy, Jun 01 '22 at 18:13

Axazexz player · Answer 1 · 2022-06-01T18:35:21.113

-1

I'v made a quick function hope it helps make sure to pass in the height and width. It slowly makes the opacity 0 and the height and width 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/ Here is an example

edited Jun 01 '22 at 18:35

answered Jun 01 '22 at 18:29

Axazexz player

50
2
6

This is what CSS Transitions are for. – Scott Marcus Jun 01 '22 at 18:39
@ScottMarcus sorry i thought he wanted js solution – Axazexz player Jun 01 '22 at 18:41
He wants a solution. No need to reinvent the wheel. – Scott Marcus Jun 01 '22 at 18:43

score -1 · Answer 2 · answered Jun 01 '22 at 18:38

-1

From: CSS display none and opacity animation with keyframes not working

I set it up below as an onhover event using css.

#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>

answered Jun 01 '22 at 18:38

Lucretius

1,053
1
13
26

1

If this is nothing more than the code from another answer, it should just be a link as a comment. Or, a vote to close as a duplicate. – Scott Marcus Jun 01 '22 at 18:39
The link gives various examples, the one I pulled from was incomplete and had syntax errors. Generally I agree though. – Lucretius Jun 01 '22 at 18:40

How can I hide and show elements with animation?

2 Answers2