我正在实现一个具有一些隐藏内容的组件，通过单击按钮即可显示。我想对max-height显示的内容进行转换，如下所示：<button id="show-hide">Toggle content</button><div id="revealable-content" class="content is-collapsed">Content to be revealed <a href="https://www.example.com">with a link</a></div>.content { overflow: hidden; height: auto; max-height: 200px; width: 200px; background-color: darkgray; transition: max-height 1000ms;}.content.is-collapsed { max-height: 0}const button = document.getElementById('show-hide')const content = document.getElementById('revealable-content')let hidden = truebutton.addEventListener('click', () => { hidden = !hidden if (hidden) { content.classList.add('is-collapsed') } else { content.classList.remove('is-collapsed') }})到目前为止，一切都很好。现在我想让它更容易访问，所以我hidden向内容 div 添加一个属性，并在我知道动画已执行后将其设置为 true 或 false setTimeout：// at the bottom of the event handler...setTimeout(() => { content.hidden = hidden}, 1000)这破坏了“展开”动画，但奇怪的是却没有破坏“折叠”动画。折叠时，过渡动画按预期运行 1 秒。但是，在展开时，max-height会立即应用，无需过渡。请参阅此 codepen的演示。这是怎么回事？我该如何解决？
4 回答
繁星点点滴滴
TA贡献1803条经验 获得超3个赞
更新：
解决方案似乎比预期容易得多。在删除 -class 之前使用较短的超时（例如 10ms）is-collapsed将为您解决问题：
注意：我将超时设置为 100 毫秒，因为使用 Firefox 时，过渡并不总是像 Chrome 中那样平滑。
const button = document.getElementById('show-hide');
const content = document.getElementById('revealable-content');
let hidden = true;
button.addEventListener('click', () => {
hidden = !hidden;
if (hidden) {
content.classList.add('is-collapsed');
return setTimeout(() => {
content.hidden = hidden;
}, 1000);
}
content.hidden = hidden;
return setTimeout(() => {
content.classList.remove('is-collapsed');
}, 100);
})
.content {
overflow: hidden;
height: auto;
max-height: 200px;
width: 200px;
background-color: darkgray;
transition: max-height 1000ms linear;
}
.content.is-collapsed {
max-height: 0
}
<button id="show-hide">Toggle content</button>
<div hidden id="revealable-content" class="content is-collapsed">
Content to be revealed
<a href="https://www.example.com">with a link</a>
</div>
梦里花落0921
TA贡献1772条经验 获得超6个赞
height: auto;没有动画效果，但有高度属性。但是当你的元素被隐藏时，(display: none)你无法获得高度。因此，您需要克隆它并获取高度，然后您可以使用高度应用动画。
<!DOCTYPE html>
<html>
<head>
<title>Avinash</title>
<style>
#slider {
margin:0px auto;
padding:0px;
width:400px;
border:1px solid #000;
background:#0f0;
height:20px;
overflow:hidden;
}
</style>
<script>
var minheight = 20;
var maxheight = 300;
var time = 1000;
var timer = null;
var toggled = false;
window.onload = function() {
var controler = document.getElementById('slide');
var slider = document.getElementById('slider');
slider.style.height = minheight + 'px';
controler.onclick = function() {
clearInterval(timer);
var instanceheight = parseInt(slider.style.height);
var init = (new Date()).getTime();
var height = (toggled = !toggled) ? maxheight: minheight;
var disp = height - parseInt(slider.style.height);
timer = setInterval(function() {
var instance = (new Date()).getTime() - init;
if(instance < time ) {
var pos = Math.floor(disp * instance / time);
result = instanceheight + pos;
slider.style.height = result + 'px';
document.getElementById('log').innerHTML = 'Current Height : <b>' + result + '</b><br /> Current Time : <b>' + instance + '</b>';
}else {
slider.style.height = height + 'px'; //safety side ^^
clearInterval(timer);
controler.value = toggled ? ' Slide Up ' :' Slide Down ';
document.getElementById('log').innerHTML = 'Current Height : <b>' + height + '</b><br /> Current Time : <b>' + time + '</b>';
}
},1);
};
};
</script>
</head>
<body>
<h1> Toggle Slide </h1>
<input type="button" id="slide" value =" Slide Down "/>
<span id="log" style="position:absolute; left:10px; top:150px;"></span>
<br />
<div id="slider">
content goes here
</div>
</body>
</html>
侃侃尔雅
TA贡献1801条经验 获得超16个赞
看起来带有属性的元素hidden具有这样的浏览器属性：
div[Attributes Style] {
display: none;
}
display: none;正在破坏动画。
这可能是一个解决方案，对我有用：
更新
const button = document.getElementById('show-hide')
const content = document.getElementById('revealable-content')
let hidden = true
button.addEventListener('click', () => {
hidden = !hidden
if (hidden) {
content.classList.add('is-collapsed')
} else {
content.style.display = 'block'; // set display block before class is-collapsed removes
setTimeout(() => {
content.classList.remove('is-collapsed')
content.style.display = ''; // clear css display
}, 100); //changed time interval for Firefox
}
setTimeout(() => {
content.hidden = hidden
}, 1000)
})
.content {
overflow: hidden;
height: auto;
max-height: 200px;
width: 200px;
background-color: darkgray;
transition: max-height 1000ms;
display: block;
}
.content.is-collapsed {
max-height: 0;
}
/*added to hide collapsed element*/
.content.is-collapsed[hidden] {
display: none;
}
<button id="show-hide">Toggle content</button>
<div hidden id="revealable-content" class="content is-collapsed">
Content to be revealed
<a href="https://www.example.com">with a link</a>
</div>
慕田峪7331174
TA贡献1828条经验 获得超13个赞
js逻辑有问题。当内容隐藏时，按下按钮显示它，在内容仍然隐藏时应用动画，动画完成后，删除隐藏属性，立即显示内容。
只需将您的点击处理程序代码更改为：
if(hidden){
content.hidden = false
}else {
setTimeout(() => {
content.hidden = true
}, 1000)
}
hidden = !hidden
setTimeout(() => {
if (hidden) {
content.classList.add('is-collapsed')
} else {
content.classList.remove('is-collapsed')
}
})
由于 Muhammad Tahazzot 答案中所述的原因，需要第二次超时 - 在元素未隐藏之前高度未知。setTimeout 不延迟地在下一个任务中执行代码 - 当元素没有隐藏时，因此可以获得高度。
为什么你需要隐藏属性？如果您想对屏幕阅读器隐藏内容，请使用 aria-hidden="true"，如果您希望内容无法通过选项卡聚焦，请使用 tabindex="-1"
- 4 回答
- 0 关注
- 146 浏览
添加回答
举报
0/150
提交
取消