我想要为 div 的高度设置动画。这通常在 CSS 中通过动画来完成max-height财产。
但是我需要在 JS 中执行此操作。 div 填充了经常变化的动态内容，因此无法提前知道实际高度。
这是一个jsfiddle：https://jsfiddle.net/vpknxuk8/
var box = document.getElementById("box");
var button = document.getElementById("button");
var expanded = true;
button.addEventListener('click', function() {
if (expanded) {
box.style.maxHeight = 0;
expanded = false;
} else {
box.style.maxHeight = "";
expanded = true;
}
});
#box {
margin-top: 20px;
border: 1px solid black;
background-color: #4f88ff;
width: 200px;
transition: max-height 0.25s linear;
overflow: hidden;
}
<button id="button">Click</button>
<div id="box">
Hello World<br>
This is dynamic content<br>
The actual height won't be known ahead of time
</div>
该框应在高度 0 和默认高度之间转换，但由于某种原因它没有动画。
StackOverflow 上此问题的唯一其他版本涉及纯 CSS 解决方案或 jQuery 解决方案。
Don't use max-height...好吧，除非你想采用CSS-only草率的解决方案会产生延迟间隙问题 - ...这就是您首先再次使用 JS 的原因，希望如此
so, use height and transition: height instead
function slidetoggle() {
document.querySelectorAll(this.getAttribute('data-slidetoggle')).forEach(el => {
const ch = el.clientHeight,
sh = el.scrollHeight,
isCollapsed = !ch,
noHeightSet = !el.style.height;
el.style.height = (isCollapsed || noHeightSet ? sh : 0) + "px";
if (noHeightSet) return slidetoggle.call(this);
});
}
document.querySelectorAll("[data-slidetoggle]").forEach(el => el.addEventListener('click', slidetoggle));
#box1,
#box2 {
overflow: hidden;
margin-bottom: 20px;
background-color: #4f88ff;
width: 200px;
transition: height 0.5s;
}
<button data-slidetoggle="#box1">Toggle Box 1</button>
<div id="box1">
Hello World<br> This is dynamic content<br> The actual height won't be<br> known ahead of time
</div>
<button data-slidetoggle="#box2">Toggle Box 2</button>
<div id="box2">
Hello World<br> This is dynamic content<br> The actual height won't be<br> known ahead of time<br> bla
<br> bla
<br> bla
</div>
TIP:如果你需要paddings，我的建议是将您的内容包装到另一个子框中 - 带填充。
上面的代码是一个概念性的和最小的代码 - 有很大的改进空间，但希望您明白了。
解释为什么上述以及为什么不使用以下内容：
如果我们不设置初始高度，CSS 高度过渡将无法工作。
所以基本上在点击时 - 如果这样的高度不存在，我们需要通过 JS 设置它。
设置这样的高度后，过渡仍然不起作用，因为浏览器没有时间计算盒子模型这种元素的 - 到过渡自:
// (INVALID DEMO)
//
// Say the element is expanded.
// We need a height to transition-from
el.height = calculatedHeight +"px"; // set CSS height to the calculated value
// Transition to 0px height....
el.height = 0 +"px";
// NO DEAL. our element just snapped to 0 without transition
因此我们需要居住在某种callback.
一种常见的（但草率的方式）是使用setTimeout()打回来
// (INVALID DEMO)
//
// Say the element is expanded.
// We need a height to transition-from
el.height = calculatedHeight +"px"; // set CSS height to the calculated value
// Transition to 0px height giving the browser some ready-state hack
setTimeout(function() {
// Eventually the box model will be calculated
el.height = 0 +"px";
}, 0); // <<< PROBLEM: Should we use 0 ? 10? 100? 1000?
// and our element beautifully transitioned to 0 height.
// Eventually :(
本文内容由网友自发贡献，版权归原作者所有，本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容，请联系:hwhale#tublm.com(使用前将#替换为@)
