Как сделать плавный расширяющийся элемент снизу до 85% от области просмотра?

Question

У меня есть этот код здесь (Пожалуйста, откройте в расширенном режиме):

#wrapper {
  position: fixed;
  background: gray;
  color: #fff;
  bottom: 0;
  left: 0;
  right: 0;
  border-radius: 12px 12px 0 0;
  width: 100%;
}

#title {
  text-align: center;
  padding: 15px;
  border-bottom: 1px solid white;
}

#notifications {
  display: flex;
  flex-direction: column;
      overflow: scroll;
    overflow-x: hidden;
}

.entry {
  padding: 15px;
}

<div id="wrapper">
  <div id="title">Notifications</div>
  <div id="notifications">
    <div class="entry">Test</div>
    <div class="entry">Test</div>
    <div class="entry">Test</div>
    <div class="entry">Test</div>
    <div class="entry">Test</div>
    <div class="entry">Test</div>
    <div class="entry">Test</div>
  </div>
</div>

Это должно быть похоже на Google Maps, когда вы исследуете поблизости. Так что, как скользить вверх div снизу. Заголовок должен быть виден, когда он не развернут, но не в уведомлениях. Когда я нажимаю на заголовок, я хочу плавно расширить элемент до 85 процентов от области просмотра, чтобы пользователь мог прокручивать уведомления. Когда он снова щелкает заголовок, он должен go вернуться в исходное состояние.

Возможно ли это? Если да, то как?

Answer 1

Для переключения между двумя состояниями, развернутыми и свернутыми, вам понадобится какой-то JavaScript.

Что касается CSS, я бы предложил вместо bottom: 0 вместо *1004* использовать что-то вроде top: calc(100% - 42px) (42 пикселя должны быть любой высоты, которую вы хотите видеть) для свернутое состояние, а затем top: 15% для расширенного состояния.

Для «гладкой» части вам просто нужно добавить анимацию перехода.

Вот базовый c кодовый блок, показывающий, что я имею в виду: https://codepen.io/milesgrover/pen/gOpbrpd