如何解决切换div以进行显示,并通过Javascript或CSS缓慢隐藏
我开始使用Javascript。现在我对动画有疑问。目前,我的代码正在正常工作。但是我无法弄清楚如何使div缓慢而不是立即“滚出”到“滚入”。
这是我到目前为止收到的。试图像这样.style.transition = "all 2s";
那样将var x = document.querySelectorAll("#toggle-div");
放在var x = document.querySelectorAll("#toggle-div").style.transition = "all 2s";
后面,但这实际上没有用。
我希望每个div(3个div)都缓慢切换,而不是像抓紧一样。
这是我目前的代码:
// Toggle all buttons texts
function change() {
var x = document.querySelectorAll("#button");
var i;
for (i = 0; i < x.length; i++) {
if (x[i].value == "Zeige Features") {
x[i].value = "Verstecke Features";
} else {
x[i].value = "Zeige Features";
}
}
}
// Toggle show and hide divs
function showhide() {
var x = document.querySelectorAll("#toggle-div");
var i;
for (i = 0; i < x.length; i++) {
if (x[i].style.display === "block") {
x[i].style.display = "none";
} else {
x[i].style.display =
"block";
}
}
}
<!--Inserting 3 buttons-->
<input onclick="change();showhide()" type="button" value="Zeige Features" id="button"></input>
<input onclick="change();showhide()" type="button" value="Zeige Features" id="button"></input>
<input onclick="change();showhide()" type="button" value="Zeige Features" id="button"></input>
<!--Inserting 3 divs-->
<div id="toggle-div"> div 1 </div>
<div id="toggle-div"> div 2 </div>
<div id="toggle-div"> div 3 </div>
希望您能提供帮助! :)
解决方法
长话短说:
您无法为HTML元素的display
属性设置动画。请改用opacity
属性。
// Toggle all buttons texts
function change(button) {
var x = document.querySelectorAll(".button");
for (let i = 0; i < x.length; i++) {
if (x[i].value == "Zeige Features") {
x[i].value = "Verstecke Features";
} else {
x[i].value = "Zeige Features";
}
}
}
// Toggle show and hide divs
function showhide() {
var x = document.querySelectorAll(".toggle-div");
for (let i = 0; i < x.length; i++) {
if (x[i].style.opacity === "0") {
x[i].style.opacity = "1";
} else {
x[i].style.opacity = "0";
}
}
}
<!-- Inserting default transition for divs -->
<style>
div {
transition: 0.5s;
}
</style>
<!--Inserting 3 buttons-->
<input onclick="change();showhide()" type="button" value="Verstecke Features" class="button"></input>
<input onclick="change();showhide()" type="button" value="Verstecke Features" class="button"></input>
<input onclick="change();showhide()" type="button" value="Verstecke Features" class="button"></input>
<!--Inserting 3 divs-->
<div class="toggle-div"> div 1 </div>
<div class="toggle-div"> div 2 </div>
<div class="toggle-div"> div 3 </div>
一些其他信息:
- 不要为多个HTML标记提供相同的ID,而应使用一个类
- 如果默认情况下您的div是可见的,则您的标签应显示“ Verstecke功能”,以便用户知道您的按钮将执行的操作
HTML:
i++
CSS:
<!--Inserting 3 buttons-->
<input onclick="change();showhide()" type="button" value="Zeige Features" id="button"></input>
<input onclick="change();showhide()" type="button" value="Zeige Features" id="button"></input>
<input onclick="change();showhide()" type="button" value="Zeige Features" id="button"></input>
<!--Inserting 3 divs-->
<div class="toggle-div">div 1</div>
<div class="toggle-div">div 2</div>
<div class="toggle-div">div 3</div>
JS:
div.toggle-div {
transition: 1s ease-out;
height: 50px;
overflow: hidden;
}
div.hidden {
height: 0;
}
版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。