Question

188

Show / Hide elements with animation

rated 0 times [ 192] [ 4] / answers: 1 / hits: 87251 / 5 Years ago, thu, april 11, 2019, 12:00:00

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.

Answers

Only authorized users can answer the question. Please sign in first, or register a free account.

jarod

Add To Favorites

Follow

Total Points: 62

Total Questions: 111

Total Answers: 83

Location: Saint Vincent and the Grenadines

Member since Sat, Sep 11, 2021

3 Years ago

jarod questions

1 Is there a way to format text in embeds using discord.js?

Sun, Aug 23, 20, 00:00, 4 Years ago

1 NestJS env variable undefined

Sun, Apr 26, 20, 00:00, 4 Years ago

1 AssertionError: expected { Object (driver, name, ...) } to have property '_id'

Thu, Jan 30, 20, 00:00, 4 Years ago

1 How I can send my axios response to a variable with node.js

Wed, Dec 18, 19, 00:00, 5 Years ago

1 How to fix TypeError: Cannot read property 'length' of undefined in JavaScript?

Mon, Oct 21, 19, 00:00, 5 Years ago

View All

answered 5 Years ago travion · Accepted Answer

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