动画后可轻松隐藏和显示内容
我正在实现一个具有一些隐藏内容的组件，通过单击按钮即可显示。我想对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 = true
button.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的演示。
这是怎么回事？我该如何解决？
暮色呼如浏览 71回答 4
4回答
-
繁星点点滴滴
更新：解决方案似乎比预期容易得多。在删除 -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
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> -
侃侃尔雅
看起来带有属性的元素hidden具有这样的浏览器属性：div[Attributes Style] {display: none;}display: none;正在破坏动画。这可能是一个解决方案，对我有用：更新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.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
js逻辑有问题。当内容隐藏时，按下按钮显示它，在内容仍然隐藏时应用动画，动画完成后，删除隐藏属性，立即显示内容。只需将您的点击处理程序代码更改为：if(hidden){ content.hidden = false}else { setTimeout(() => { content.hidden = true }, 1000)}hidden = !hiddensetTimeout(() => { if (hidden) { content.classList.add('is-collapsed') } else { content.classList.remove('is-collapsed') }})由于 Muhammad Tahazzot 答案中所述的原因，需要第二次超时 - 在元素未隐藏之前高度未知。setTimeout 不延迟地在下一个任务中执行代码 - 当元素没有隐藏时，因此可以获得高度。为什么你需要隐藏属性？如果您想对屏幕阅读器隐藏内容，请使用 aria-hidden="true"，如果您希望内容无法通过选项卡聚焦，请使用 tabindex="-1"
随时随地看视频慕课网APP
相关分类
Html5