Show / Hide elements with animation

Question

I'm creating a website and i'm trying to make a button that will toggle the visibility of a div element. it works for me right now but I want to add an animation to it and I just can't pull it off.

I tried changing the "block" to fadeIn() and the "none" to fadeOut() but that didn't work.

Any ideas?

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

 <button onclick="pcsh1()">Show / Hide PC 1</button> <div id="pc1"> <textarea rows="2" cols="20" placeholder="PC Name" class="pcbox">PC Name: </textarea> <textarea rows="2" cols="20" placeholder="Alignment" class="pcbox">Alignment: </textarea> <textarea rows="2" cols="20" placeholder="Max HP" class="pcbox">Max HP: </textarea> <textarea rows="2" cols="20" placeholder="Current HP" class="pcbox">Current HP: </textarea> </div> 

The output currently is great but I would prefer it to have an animation.

Answer 1

You could use the CSS transition rule and simply toggle a CSS class on the target element using JavaScript. transition will let you change one, or several CSS rules on an element.

transition

Transitions enable you to define the transition between two states of an element...

Here is an example

 var btn = document.getElementsByTagName('button')[0] var p = document.getElementsByTagName('p')[0] btn.addEventListener('click', evt => { p.classList.toggle('show') }) 

 .show { opacity: 1; } p { opacity: 0; transition: opacity 0.6s linear; } 

 <button>Click Me</button> <p>Hello</p> 

With your example this is how you could do it:

 var btn = document.getElementsByTagName('button')[0]; var pc1 = document.getElementById('pc1'); btn.addEventListener('click', function() { pc1.classList.toggle('hide'); }); 

 #pc1 { opacity: 1; transition: opacity 0.5s linear; } #pc1.hide { opacity: 0; } 

 <button>Show / Hide PC 1</button> <div id="pc1"> <textarea rows="2" cols="20" placeholder="PC Name" class="pcbox">PC Name: </textarea> <textarea rows="2" cols="20" placeholder="Alignment" class="pcbox">Alignment: </textarea> <textarea rows="2" cols="20" placeholder="Max HP" class="pcbox">Max HP: </textarea> <textarea rows="2" cols="20" placeholder="Current HP" class="pcbox">Current HP: </textarea> </div> 

Answer 2

I would suggest toggling hide/show using the animation-friendly opacity prop instead of display in the following manner:

function pcsh1() {
    var x = document.getElementById("pc1");
    if (x.classList.contains("hide")) {
      x.classList.remove("hide");
    } else {
      x.classList.add("hide");
    }
}

and adding a css transition:

#pc1 {
  opacity: 1;
  transition: opacity 1s;
}
#pc1.hide {
  opacity: 0;
}

here is an example codepen: https://codepen.io/mikeCky/pen/WWjLEq

Answer 3

fadeIn() and fadeOut() are JQuery functions. From the code you posted, you're not using JQuery. You have some basic options to do what you want:

• JQuery Effects - This will use fadeIn() and fadeOut(), but you'll have to use JQuery;
• CSS Animations - You can do what you want using @Keyframes in CSS;
• CSS Transitions - The most recommended for your case. You can use the "transition" attribute to change the opacity of the element, specify the duration of the animation and if want it to repeat the animation.

Answer 4

Simple use toggle class instead display block. Then hide element by scale y axis to 0. Heres your code:

function pcsh1() {
  var x = document.getElementById("pc1");
  x.classlist.toggle('is-show');
 }

And your css:

#pc1 {
    transform: scaleY(0);
    transition: transform 400ms ease 0ms;
}

#pc1.is-show {
    transform: scaleY(1);
    transition: transform 400ms ease 0ms;
}