Как сделать выдвигающийся футер?

Question

[Evgeniy]

Всем привет!

Помогите пожалуйста решить задачку
Как сделать так, чтобы при нажатии на кнопку, футер выдвигался вверх плавно?

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

Как можно переделать чтобы:
- Футер выдвигался вверх плавно и сжимался плавно?
- Или хотя бы чтобы просто выдвигался вниз плавно? Но тогда чтобы и вьюпорт тоже прокручивался вниз плавно, а то получится что на кнопку нажали, а изменений не видно, выдвинулось там что-то или нет, пока сам не прокрутишь вниз

PS// Прошу учитывать то, что у body есть только overflow-x , overflow-y быть не может, и желательно без query и пр библиотек

https://codepen.io/Zhelezniy/pen/BambYOe

Answer 1

[Kvason]

https://codepen.io/vankvas/pen/eYeXrJQ

Comments

[Evgeniy]

Неплохо, но не совсем то..

[Kvason]

Evgeniy, а что конкретно надо?

[Evgeniy]

Kvason, обновил codepen , смари, сейчас сделал так, чтобы при нажатии на кнопку плавно скролилось к низу страницы, к <div id="footer__end">

Вот такой должен быть эффект, плавно раскрылись и проскролились, и также плавно закрылись

Только сейчас странный баг, если несколько раз тыкнуть, кнопка почему-то вверх уезжает.
И первое раскрытие плавное, а следующие не очень..

[Kvason]

Evgeniy, https://codepen.io/vankvas/pen/ExbMGex нечто подобное?

[Evgeniy]

Kvason, Вот кстати этот вариант хорош, спасибо)