发布添加过渡效果的div显示隐藏功能

Question

我有一个显示/隐藏在一个div块这是工作良好。我只是有一个问题，添加过渡动画效果，使其打开和关闭更平滑，它似乎不适合我。任何帮助将是伟大的，下面的代码:

var x = document.getElementById("one");
function myFunction() {
var y = document.getElementById("but");
if (x.style.display === "none") {
x.style.display = "block";
y.innerHTML = "Close";
} else {
x.style.display = "none";
y.innerHTML = "Open";
}
}
var btn = document.getElementsByTagName('button')[0];
btn.addEventListener('click', function() {
x.classList.toggle('hide');
});

#one {
width: 100%;
padding: 50px 0;
text-align: center;
background-color: lightblue;
margin-top: 20px;
opacity: 1;
transition: opacity 0.5s linear;
}
#one.hide {
opacity: 0;
}

<div id="one">
This is an element.
</div>
<button id="but" onclick="myFunction()">Close</button>

Answer 1

您已经编写了CSS来动画不透明度，但您从未在JavaScript中处理过它。display属性不能动画

你有一个很好的CSS声明#one.hide，在那里你设置opacity: 0。使用JavaScript检查"隐藏"类是否在使用element.classList接口的元素中。如果有一个"隐藏"类，它意味着元素是隐藏的，你应该从那里删除它，以便它打开并将按钮的文本更改为"关闭"。如果没有'hide'类(元素是打开的)，则执行相反的操作。

也在#one.hide中设置visibility: hidden，使其不可选。并且在过渡属性中添加visibility 0.5s linear或简单地添加all 0.5s linear，这样动画也会在关闭时发生(否则它只会在显示时动画而不是隐藏时动画)。

var x = document.getElementById("one");
function myFunction() {
var y = document.getElementById("but");
if (x.classList.contains("hide")) {
x.classList.add("hide");
y.innerHTML = "close";
} else {
x.classList.remove("hide");
y.innerHTML = "open"
}
}
var btn = document.getElementsByTagName('button')[0];
btn.addEventListener('click', function() {
x.classList.toggle('hide');
});

#one {
width: 100%;
padding: 50px 0;
text-align: center;
background-color: lightblue;
margin-top: 20px;
opacity: 1;
transition: opacity 0.5s linear, visibility 0.5s linear; // or just -> all 0.5s linear
}
#one.hide {
opacity: 0;
visibility: hidden;
}

<div id="one">
This is an element.
</div>
<button id="but" onclick="myFunction()">Close</button>