Question

因此，我拥有此UL，其内容随时变化。我想出了一个相当整洁的解决方案，可以在增加新项目时平稳地增加高度，但是我却坚持这样做。

通过CSS，初始height设置为0，其中overflow: hidden。变异观察者监视元素，并且随着内容的更改，它会将.style.height修改为等于.scrollHeight，再加上CSS中的过渡，可以很好地平滑扩展到元素。不幸的是，它不能反向工作，因为.scrollHeight当然是指全尺寸的元素。有没有办法在不实际更改fit-content的情况下获得.style.height的计算高度？

请仅使用Vanilla解决方案（无jquery等）。这是我要保留为一个文件的脱机项目。

var observer = new MutationObserver(() => {
	observer.target.style.height = observer.target.scrollHeight + 'px'
})
observer.target = document.querySelector('#animated')
observer.observe(observer.target, { childList: true })

var lines = 0

function demo(inc) {
	lines += inc
	observer.target.innerHTML = '<li>Demonstration</li>'.repeat(lines)
}

#animated {
	height: 0;
	overflow: hidden;
	border: 1px solid black;
	transition: 1s;
}

<button onclick="demo(1)">Demo Expand</button>
<button onclick="demo(-1)">Demo Contract</button>

<ul id="animated"></ul>

Answer 1

使用children的总高度

[...observer.target.children].reduce((a, i) => a + i.scrollHeight, 0) + 'px'

var observer = new MutationObserver(() => {
  observer.target.style.height = [...observer.target.children].reduce((a, i) => a + i.scrollHeight, 0) + 'px'
})
observer.target = document.querySelector('#animated')
observer.observe(observer.target, {
  childList: true
})

var lines = 0

function demo(inc) {
  lines += inc
  observer.target.innerHTML = '<li>Demonstration</li>'.repeat(lines)
}

#animated {
  height: 0;
  overflow: hidden;
  border: 1px solid black;
  transition: 1s;
}

<button onclick="demo(1)">Demo Expand</button>
<button onclick="demo(-1)">Demo Contract</button>

<ul id="animated"></ul>

将高度缩小到内容尺寸

1 个答案: