单击按钮时如何使 div 淡出？

Question

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>

我希望 div 按钮在我按下按钮时消失，谢谢。我是初学者，在此先感谢:)

Answer 1

您不能为 non-numeric 属性设置动画，如 display。改为更改不透明度。

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>

单击按钮时如何使 div 淡出？

How can I fade a div out when a button is clicked?

html

css

css-transitions