Nikolay Talanov

Какие то ужасные советы выше перечислены, не советую вообще использовать стандартные методы jQuery для анимации.
В вашем случае анимация при убирании класса не срабатывает, ибо собственно она привязана к этому классу. Вам необходимо задать свойство transition для самого элемента .panel

.panel {
  transition: transform 0.7s;
}

1) Viewport единицы. В данном случае 100vh. Поддержка вот такая caniuse.com/#search=viewport
2) Если ваш див не находится где то глубоко в разметке, а лежит прямо в body (или глобальном контейнере), то можно сделать вот так:

html, body {
  height: 100%;
}
.container { // если имеется
  height: 100%;
}
.block {
  height: 100%;
}

Так как мы не задаем overflow: hidden для body или контейнера, то с ними ничего плохого не произойдет, контент по прежнему будет адекватно отображаться и скроллится.

Лучше на достаточно хорошем уровне изучить html+css+js (ваниллу+jQuery) и только потом смотреть в сторону фреймворков. Фрейморвки конечно вещь крутая, но их слишком много (или они слишком громоздкие). Отличные познания в js, и фронтенде в целом, не денутся никуда, а вот знания полученные от изучения особенностей и внутренностей какого-нибудь монструозного ангуляра могут с легкостью превратиться в тыкву с выходом, допустим, второй его версии (не все конечно, но большая часть). Все таки фреймворки это вещи уже под конкретные задачи, и они чаще всего рассчитаны на команды.