Она производит принудительную перерисовку https://gist.github.com/paulirish/5d52fb081b3570c81e3a в данном случае для того, чтобы анимировать переход высоты из offsetHeight в 0. Попробуйте ее убрать, и увидите, что анимации нет.
Попробуйте ее убрать, и увидите, что анимации нет.
Именно поэтому я и пошёл спрашивать что она делает. Использую eslint с конфигом airbnb-base и он ругается ссылаясь на no-unused-expressions.
Я пытался понять что ему не нравится, но так и не понял)
Теперь стало ясней. Спасибо ещё раз.
Павел Корнилов, Нужно ещё как минимум повесить overflow: hidden на .content.
Конкретно способ с высотой не очень хорош т.к. приходится доп. обёртку делать и ручками дописывать css.
Не знаю на сколько медленней тот вариант, что нашёл я, но он явно проще для конечно пользователя.
IIIu6ko, он просто избыточен. Незачем делать reflow для такого простого перехода. Он подходит для более сложных анимаций, где нужно в один момент применить стиль без анимирования, и в тот же момент применить стиль но уже с анимированным переходом. Например, какой-нибудь расхлоп блока на весь экран, по клику он становится position: fixed с позициями, которые оставляют его на том же месте, как когда он был не fixed, и после сразу должны примениться новая позиция, но уже с плавным переходом. Вот пример, как когда-то я решал эту задачку с reflow (код ужасный, написан с телефона, чисто для примера) https://jsfiddle.net/ox06nst3/1/ Можно без reflow, но тогда нужно заранее вычислять и применять позицию блока, но если таких кнопок на странице много (как было в моем случае), или они еще могут менять свою позицию/размер, то лучше этого костыля сложно придумать (пишу это с надеждой, что кто-то сейчас мне возразит и скинет нормальное решение).
