单击按钮后如何淡出div？

问题描述

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和按钮在我按下按钮时逐渐消失，谢谢。 我是一个初学者，谢谢：）

解决方法

您不能为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>