Как jQuery Slidedown получает конечную высоту скрытого элемента, прежде чем показывать его?
Я пытаюсь воспроизвести jQuery slideDown()
в GSAP, и у меня возникли проблемы с разработкой того, как jQuery вычисляет высоту элемента, который в настоящее время скрыт, как если бы он был установлен в height:auto
.
я попытался тралить код на GitHub, но не могу найти код, который, похоже, делает это в jQuery.fn.slideDown
или jQuery.fn.animate
, которые он вызывает.
есть несколько подобных вопросов по SO и несколько предлагаемых решений, все из которых, похоже, имеют свои собственные проблемы:
клонировать элемент, расположить его за пределами экрана и рассчитать его высоту.
это не будет работать, если элемент или любой из его дочерних элементов имеет высоту, заданную стилями CSS, которые требуют, чтобы элемент находился на своем исходном месте в DOM (например,.accordianItem
может быть только в стиле, если внутри.accordian
).отобразить элемент, удалить
height:0
и быстро высчитайте высоту перед снова скрытие элемента, а затем указание анимации.
это может быстро мигать содержимое при расчете высоты.использовать
visibility:true
показать его на месте при расчете высоты.
это остановит вспышку и все равно сохранит элемент в том же положении в DOM для правильного расчета высоты, но он все равно будет нажимать другие элементы ниже него, потому чтоvisibility:false
элементы все-таки есть высота.вычислите высоту элемента до его скрытия и сохраните его в атрибуте данных, чтобы мы знали, когда мы хотим открыть элемент позже.
это не будет работать, если любой динамический контент изменяет высоту элемента, пока он скрыт.
jQuery slideDown()
"просто работает", каждый раз, поэтому мне было бы интересно знать как это работает, но я просто не могу понять, где он это делает. Я также удивлен, что GSAP не может сделать это из коробки, или что никто не поделился правильным решением этого раньше.
любая помощь будет действительно оценили.
1 ответов
получается, что если вы используете $.height()
чтобы получить высоту элемента с display:none
он не возвращает 0
как и следовало ожидать, она фактически устанавливает visibility:hidden
, position:absolute
etc. и устанавливает display
to block
чтобы дать вам правильную высоту обратно. Я предполагаю, что это то, что используется внутри при выполнении slidedown.
этот ответ мне очень помог.
библиотека jQuery: высота () ширина() и "дисплей:нет"
просто чтобы быть ясно, о том, как это кажется, чтобы избежать всех проблем в моем первоначальном вопросе. Он в основном делает номер (3), но избегает проблемы нажатия Нижнего содержимого вниз по странице, потому что он также установлен в положение:абсолютный, когда вычисляется высота. Очень простое элегантное решение