Отображение модального окна в JavaScript без плавного перехода - PullRequest
Новая
       36

Отображение модального окна в JavaScript без плавного перехода

0 голосов
/ 09 июля 2020

Я сжал эффект css, который мне нравится для некоторых всплывающих модальных окон в моем приложении, но у меня возникают проблемы, когда модальные окна создаются в DOM в JS.

Когда пользователь нажимает кнопку, чтобы «открыть» модальное окно, он должен плавно переходить, увеличиваясь в размере (увеличивая масштаб). Когда это просто html и css, это работает так, как нужно, однако, когда это событие щелчка в JS, которое я написал, модальное окно просто внезапно появляется и исчезает (если я использую 'display: block'), или он очень резкий, или я вообще не могу заставить его работать (если я использую 'visibility: visible').

Мне кажется, что он не рассматривает это как «переход», а эффект не применяется, или я каким-то образом пытаюсь передать размытый фон, а не модальный элемент.

Это мой css ..... 

.modal {
  display: none; <-- added to flip between states, might be cause of problem

  height: 100vh; 
  width: 100%;
  position: fixed;
  top: 0;
  left: 0; 
  background-color: rgba($color-black, .8);
  z-index: 999999;
  opacity: .98; 
  transition: all .3s;

  @supports(-webkit-backdrop-filter: blur(10px)) or (backdrop-filter:blur(10px)){
    -webkit-backdrop-filter: blur(10px);
    backdrop-filter: blur(10px);
    background-color: rgba($color-black, .3);
  }

  &__content {
    @include absCenter; 
    width: 75%; 
    background-color: $color-white;
    box-shadow: 0 2rem 4rem rgba($color-black, .2);
    border-radius: 3px;
    display: table; 
    overflow: hidden;
    opacity: 1; 
    transform: translate(-50%, -50%) scale(1);
    transition: all .5s .2s;
  }

Пожалуйста простите (очень) псевдокод для JS, но на самом деле код - это спагетти, как мама делала ..... 

dbRecord.forEach(el => {
   const button = document.createElement('button')
   button.innerHTML = <populate some html with db info>

   button.addEventListener('click', (e) => {
         modal.style.display = 'block' 
         modal.innerHTML = <set attributes from parent element>

         document.querySelector('.modalCloseButton').addEventListener('click') => {
                modal.style.display = 'none'
         }
         ...
  }
}

Как я могу сделать этот переход плавным, а не резким?

1 Ответ

2 голосов
/ 09 июля 2020

У меня переход работает только в одну сторону. Возможно, этот пример кода поможет вам заставить его работать и по-другому. display не может иметь переходов. Установите background и color на transparent. Когда ваше время перехода 0.3s, сделайте setTimeout, чтобы установить его на display: none через 0,3 секунды. 

var modal = document.querySelector('.modal');
var dbRecord = ['foo', 'bar']
dbRecord.forEach(el => {
  var button = document.createElement('button');
  button.innerHTML = 'populate some html with db info<br>' + el;

  button.addEventListener('click', (e) => {
    modal.querySelector('p').innerHTML = 'set attributes from parent element<br>' + el;
    document.querySelector('.modalCloseButton').style.display = 'block';
    modal.style.display = 'block';
    modal.style.backgroundColor = 'rgba(0,0,0,.8)';
    modal.style.color = 'white';

  });
  document.body.appendChild(button);
});
document.querySelector('.modalCloseButton').addEventListener('click', () => {
  modal.style.backgroundColor = 'rgba(0,0,0,0)';
  modal.style.color = 'transparent';
  document.querySelector('.modalCloseButton').style.display = 'none';
  setTimeout(() => {
    modal.style.display = 'none';
  }, 300)
});
.modal {
  display: none;
  height: 100vh;
  width: 100%;
  position: fixed;
  top: 0;
  left: 0;
  background-color: rgba(0, 0, 0, 0);
  z-index: 999999;
  color: transparent;
  transition: all .3s linear 0s;
}
.modalCloseButton {
  display: none;
}
<div class="modal">
  <p></p>
  <button class="modalCloseButton">&times;</button>
</div>
...