单击按钮时，如何淡出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

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