我正在尝试让 css 过渡与我正在使用 Angular 7 开发的 Accordion 元素一起使用,以便在底部展开时使用。因为我自己不打算使用该元素,所以我使用 overflow-y: visible;
以确保放置在里面的任何东西都能正确显示。
这意味着由于使用了溢出,我引用了 max-height
而不是 height
为了我的过渡。我已经看到它建议将此转换与溢出一起使用,我应该设置 max-height
远远超过它永远需要的东西。
这很好,除了过渡将始终使用该值并且动画可能看起来非常愚蠢,具体取决于其内容。为了解决这个问题,我想我可以等待元素被实例化,填充它的内容,捕获它的 scrollHeight
然后将其设置为 max-height
.
我可以用 setTimeout
做(而且确实有效)在 ngAfterViewInit()
内使用但是 scrollHeight
直到大约 70 毫秒后才计算和定义(根据一些超时测试),然而 textContent
是不是马上就有了。
这让我开始思考,scrollHeight
是否有特定的意义?是计算出来的,有什么方法可以连接到该事件或其他任何东西吗?我不想依赖一个奇怪的任意时间值 setTimeout()
.
只是一个概念问题,您认为您不需要任何代码或任何东西吗?谢谢大家
最佳答案
应用于 DOM 元素的更改不会立即应用,在单个执行周期中对 DOM 所做的所有更改都将收集并在一次重绘中应用。
因此您需要等待重绘完成,然后再尝试读取元素的更新尺寸。
requestAnimationFrame
是在每次重绘之前执行的方法,如果您这样编写代码
element.style.display = 'block';
requestAnimationFrame(() => console.log(element.scrollHeight));
回调将在下一次重绘之前执行,您应该得到更新后的 scrollHeight。
关于javascript - 在什么时候计算 scrollHeight,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/54421507/