在显示隐藏项目之前,jQuery Slidedown如何获得隐藏项目的最终高度？

Question

我正在尝试slideDown()在GSAP中复制jQuery ,并且我无法弄清楚jQuery如何计算当前隐藏的项目的高度,就像它被设置为一样height:auto.

我已经尝试在GitHub上搜索代码,但找不到任何似乎正在执行此操作jQuery.fn.slideDown或代码jQuery.fn.animate调用的代码.

关于SO有几个类似的问题,并提出了几个解决方案,所有这些问题似乎都有其自身的问题:

1. 克隆元素,将其放在屏幕上并计算其高度.
   
   如果元素或其任何子元素具有由CSS样式设置的高度,这将不起作用,CSS样式要求元素位于DOM中的原始位置(例如,.accordianItem如果它在其内部,则可能仅被设置样式.accordian).

2. 显示项目,删除height:0并快速计算高度,然后再次隐藏元素,然后说明动画.
   
   这可能会在计算高度时快速闪烁内容.

3. 用于visibility:true在计算高度时将其显示到位.
   
   这将停止闪光并仍然将元素保持在DOM中的相同位置以进行正确的高度计算,但是仍然会将其下方的其他项目推下来,因为visibility:false项目仍然具有高度.

4. 在项目被隐藏之前计算项目的高度并将其存储在数据属性中,以便我们在以后打开项目时知道它.
   
   如果任何动态内容在隐藏项目时更改项目的高度,则此操作无效.

jQuery slideDown()每次"只是工作",所以我真的很想知道它是如何工作的,但我无法解决它在做什么的问题.我也很惊讶GSAP不能开箱即用,或者之前没有人分享过这个问题.

真的很感激任何帮助.

Answer 1

事实证明,如果你用$.height()得到与元素的高度,display:none它不返回0你所期望的,它实际上是设置visibility:hidden,position:absolute等等,并设置display来block给你正确的高度回来.我认为这是在进行滑行时内部使用的内容.

这个答案对我帮助很大.

jQuery:height()/ width()和"display:none"

只是为了清楚这是如何避免我原来问题中的所有问题.它基本上是做数字(3)但是避免了将较低的内容推到页面上的问题,因为它也被设置为位置:绝对在计算高度时.一个非常简单优雅的解决方