Блог

Главная - Вопросы по программированию - Анимационный переход для модального

Анимационный переход для модального

#html #css

#HTML #css

Вопрос:

Это мой модальный html-код

 <div class="modal">
    <div class="modal-body">
    </div>
</div>
<div class="modal-background"></div>

Это мой CSS

   modal {
    position: fixed;
    top: 53px;
    right: 0;
    bottom: 0;
    left: 0;
    z-index: 1000;
    overflow: auto;
    transition: opacity 0.4s, bottom 0.4s; 
    opacity: 1;      

    .modal-body {
      padding-left: 70px;
      background: #fff;
      border: 0;
      border-bottom-left-radius: 1rem;
      border-bottom-right-radius: 1rem;
      box-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.05);
    }
  }

  .modal-background {
    position: fixed;
    top: 55px;
    right: 0;
    bottom: 0;
    left: 0;
    background-color: #000;
    opacity: 0.75;
    z-index: 900;
  }
}

body.modal-open {
  overflow: hidden;
}

Я пытался добавить переход анимации скольжения вниз при открытии модального, но я не знаю, почему это не сработало, может кто-нибудь мне помочь?. Заранее спасибо

Комментарии:

1. Вы никогда не меняете bottom значение модального, отсутствует ли какой-то код? Переход ничего не сделает, если свойство, которое он передает, не изменится

2. я создал этот модальный переход на основе этого руководства stackblitz.com/edit/angular-9-modal-windows . есть какой-нибудь способ добавить переход анимации скольжения вниз? @Rylee