Как jQuery Slidedown получает окончательную высоту скрытого элемента, прежде чем показывать его?

Question

Я пытаюсь реплицировать jQuery slideDown() в GSAP, и у меня возникли проблемы с разработкой того, как jQuery вычисляет высоту элемента, который в настоящее время скрыт, как если бы он был установлен на height:auto.

Я пробовал тралить код на GitHub, но не могу найти код, который, кажется, делает это в jQuery.fn.slideDown или jQuery.fn.animate, который он вызывает.

Есть несколько подобных вопросов на SO и несколько решений, предложенных, все из которых, кажется, имеют свои собственные проблемы:

1. Clone элемент, позиционируют его экран и рассчитать его высоту.
   
   Это не сработает, если элемент или его дочерние элементы имеют высоту, заданную стилями 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 и т.д., и устанавливает displayblock для того чтобы дать вам правильный высота задний. Я предполагаю, что это то, что используется внутри, когда вы делаете скольжение.

Этот ответ мне очень помог.

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

Просто чтобы быть ясно, о том, как это кажется, чтобы избежать всех проблем в моей оригинальный вопрос.Это в основном делает число (3), но избегает проблемы нажатия на нижний контент вниз по странице, потому что он также установлен в положение: абсолютное, когда вычисляется высота. Очень простое изящное решение