Что делает elem.offsetHeight?

Question

[IIIu6ko]

Добрый день. Подскажите что делает строка elem.offsetHeight в функциях slideUp и slideDown.

Answer 1

[Владимир Проскурин]

Она производит принудительную перерисовку https://gist.github.com/paulirish/5d52fb081b3570c81e3a в данном случае для того, чтобы анимировать переход высоты из offsetHeight в 0. Попробуйте ее убрать, и увидите, что анимации нет.

Comments

[IIIu6ko]

Спасибо!

Попробуйте ее убрать, и увидите, что анимации нет.

Именно поэтому я и пошёл спрашивать что она делает. Использую eslint с конфигом airbnb-base и он ругается ссылаясь на no-unused-expressions.
Я пытался понять что ему не нравится, но так и не понял)
Теперь стало ясней. Спасибо ещё раз.

[Павел Корнилов]

IIIu6ko, это какой же гений, не знаю на какую букву, такое выдумал???

[IIIu6ko]

Павел Корнилов, Можно спокойно задавать margin и padding и уводит в display: none.
Это аналог функции slideToggle из jquery.

Если сможете написать красивей или знаете аналог получше, то я только рад буду.

Меня только смущает, что при быстром даблклике по кнопке скачок происходит.

[Павел Корнилов]

IIIu6ko, так разве мой вариант не делает то же самое? Что я не заметил?
И никакого косяка с даблкликом в нем нет.

[IIIu6ko]

Павел Корнилов, Попробуйте padding или margin для content задать.

[Павел Корнилов]

IIIu6ko, в вашем примере я такого не вижу. Сделайте, как вам нужно.

[IIIu6ko]

Павел Корнилов,

[Павел Корнилов]

IIIu6ko,

[IIIu6ko]

Павел Корнилов, Нужно ещё как минимум повесить overflow: hidden на .content.

Конкретно способ с высотой не очень хорош т.к. приходится доп. обёртку делать и ручками дописывать css.
Не знаю на сколько медленней тот вариант, что нашёл я, но он явно проще для конечно пользователя.

[Павел Корнилов]

IIIu6ko, можно доработать под себя как угодно. Обертку, при желании можно сделать динамически, стили тоже. Это 10 мин. работы.

[IIIu6ko]

Павел Корнилов, А чем плох тот вариант, что я нашёл?

[Владимир Проскурин]

IIIu6ko, он просто избыточен. Незачем делать reflow для такого простого перехода. Он подходит для более сложных анимаций, где нужно в один момент применить стиль без анимирования, и в тот же момент применить стиль но уже с анимированным переходом. Например, какой-нибудь расхлоп блока на весь экран, по клику он становится position: fixed с позициями, которые оставляют его на том же месте, как когда он был не fixed, и после сразу должны примениться новая позиция, но уже с плавным переходом. Вот пример, как когда-то я решал эту задачку с reflow (код ужасный, написан с телефона, чисто для примера) https://jsfiddle.net/ox06nst3/1/ Можно без reflow, но тогда нужно заранее вычислять и применять позицию блока, но если таких кнопок на странице много (как было в моем случае), или они еще могут менять свою позицию/размер, то лучше этого костыля сложно придумать (пишу это с надеждой, что кто-то сейчас мне возразит и скинет нормальное решение).

Answer 2

[Pashok Doom]

https://developer.mozilla.org/ru/docs/Web/API/HTML...