1

function animateHelloworld() {
  document.querySelector('#hello-world').style.display = "block";
  document.querySelector('#button').style.display = "none";
}
#hello-world {
  display: none;
}
<div id="hello-world">
  Hello world
</div>
<div id="button">
  <button onclick="animateHelloworld()">press me</button>
</div>

I want the div and the button fade away as I press the button thank you. I am a begginer thanks in advance :)

isherwood
  • 58,414
  • 16
  • 114
  • 157
Cathy
  • 15
  • 3
  • You can't use a CSS transition to animate the `display` property. Related question: [Transitions on the CSS display property](https://stackoverflow.com/questions/3331353/transitions-on-the-css-display-property) – DBS Sep 02 '20 at 12:59
  • Protip: Tags are text in your markup. _Elements_ are what you see in the browser. You can't click a tag. – isherwood Sep 02 '20 at 13:02

1 Answers1

2

You cannot animate non-numeric properties like display. Change the opacity instead.

function animateHelloworld() {
  document.querySelector('#hello-world').style.opacity = "1";
  document.querySelector('#button').style.opacity = "0";
}
#hello-world {
  opacity: 0;
}

#hello-world,
#button {
  transition: opacity 1s ease-in-out;
}
<div id="hello-world">
  Hello world
</div>
<div id="button">
  <button onclick="animateHelloworld()">press me</button>
</div>
Terry
  • 63,248
  • 15
  • 96
  • 118
  • I'll try this, thank you for your answer @korki :) – Cathy Sep 02 '20 at 13:06
  • but I can still click the button. Do you know how to get rid of it? @korki – Cathy Sep 02 '20 at 13:14
  • You can add `document.querySelector('#button').disabled = true;` to the `animateHelloworld` function, so the button gets disabled when the function is called – korki Sep 25 '20 at 18:12