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