CSS-переходы не работают на моде jQuery

Question

Это, вероятно, наименее сложная проблема, с которой я столкнулся на этой неделе. Я динамически загружаю данные из JSON и заполняю поля в модале. Будучи любителем пользовательского опыта, я хочу, чтобы модал масштабировался. Я открыт для внесения изменений в этот скрипт, поскольку он успешно выполняет то, что мне нужно.

выпуск При открытии модального (нажав на название). jQuery добавляет .active к родителю (оверлей), который начинает процесс. Когда модал открывается, Inner (modal-pop-content) уже масштабируется в 1 вместо того, чтобы начинаться с 1. Я сделал задержку. А также в моем JS я использовал css для встроенного добавления transform: scale (1).

Вот кодекс, над которым я работаю. https://codepen.io/designsbycamaron/pen/ROzZWj

css - это проблема.

.area-pop.active {
    position: fixed;
    width: 100%;
    height: 100%;
    top: 0;
    z-index: 999;
    background: rgba(0,0,0,.8);
    left: 0;
    opacity:1;
    display: flex;
    align-items: center;
}
.area-pop.active .modal-pop-content {
    transform: scale(1);
    -webkit-transform: scale(1);
    -moz-transform: scale(1);
    -o-transform: scale(1);
    -webkit-transition: -webkit-transform 1500ms ease-in-out;
    -moz-transition: -moz-transform 1500ms ease-in-out;
    -o-transition: -o-transform 1500ms ease-in-out;
    transition: transform 1500ms ease-in-out;
}
.modal-pop-content {
    width: 50%;
    background-repeat: no-repeat;
    background-size: 400px;
    background-position: 30% center;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
    -ms-flex-direction: column;
    flex-direction: column;
    margin: 0 auto;
    -webkit-transform: scale(0);
    transform: scale(0);
    -webkit-transform: scale(0);
    -moz-transform: scale(0);
    -o-transform: scale(0);
    -webkit-transition: -webkit-transform 1500ms ease-in-out;
    -moz-transition: -moz-transform 1500ms ease-in-out;
    -o-transition: -o-transform 1500ms ease-in-out;
    transition: transform 1500ms ease-in-out;
}

Я попробовал почти все. Опять же ... если у вас есть лучшее решение, я открыт для него. Я могу просто сделать постепенный переход. Но я чувствую, что у меня возникла бы та же проблема.

Спасибо, сообщество!

Answer 1

Я заставил его работать, добавив scale(1) к .modal-pop-content.active Затем добавьте класс active к модальному содержимому просто после того, как .area-pop показано с помощью setTimeout()

$('.close').click(function() {
  $('.area-pop').removeClass('active');
  $('.modal-pop-content').removeClass('active');
});

$('.modal-click').click(function() {
  $('.area-pop').addClass('active');
  setTimeout(function() {
    $('.modal-pop-content').addClass('active');
  }, 50);
  return false;
});

.wrap {
  text-align: center;
}

.area-pop.active {
  position: fixed;
  width: 100%;
  height: 100%;
  top: 0;
  z-index: 999;
  background: rgba(0, 0, 0, .8);
  left: 0;
  opacity: 1;
  display: flex;
  align-items: center;
}

.modal-pop-content.active {
  -webkit-transform: scale(1);
  transform: scale(1);
  -webkit-transform: scale(1);
  -moz-transform: scale(1);
  -o-transform: scale(1);
}

.modal-pop-content {
  width: 50%;
  background-repeat: no-repeat;
  background-size: 400px;
  background-position: 30% center;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
  -ms-flex-align: center;
  align-items: center;
  -ms-flex-direction: column;
  flex-direction: column;
  margin: 0 auto;
  -webkit-transform: scale(0);
  transform: scale(0);
  -webkit-transform: scale(0);
  -moz-transform: scale(0);
  -o-transform: scale(0);
  -webkit-transition: -webkit-transform 1500ms ease-in-out;
  -moz-transition: -moz-transform 1500ms ease-in-out;
  -o-transition: -o-transform 1500ms ease-in-out;
  transition: transform 1500ms ease-in-out;
}

h2.modal-pop-title,
.modal-pop-content .content-area {
  color: #fff;
}

.modal-pop-content .content-area {
  color: #fff;
  line-height: 28px;
  display: flex;
}

.emp-photo img {
  width: 90%;
}

.emp-photo {
  width: 50%;
}

.emp-content-area {
  width: 70%;
}

.close {
  position: absolute;
  color: #fff;
  font-size: 32px;
  right: 30%;
  top: 1%;
  cursor: pointer;
}

.area-pop:not(.active) {
  display: none;
  opacity: 0;
}

h3.emp-title a {
  color: #000;
}

h3.emp-title {
  font-size: 16px;
  text-align: center;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="wrap">
  <div class="elementor-element elementor-element-bc3e463 elementor-widget elementor-widget-image is-mac" data-id="bc3e463" data-element_type="widget" data-widget_type="image.default">
    <div class="elementor-widget-container">
      <div class="elementor-image">
        <img width="170" height="239" src="https://upload.wikimedia.org/wikipedia/en/thumb/1/17/Bugs_Bunny.svg/220px-Bugs_Bunny.svg.png" class="attachment-full size-full" alt=""> </div>
    </div>
  </div>
  <div class="elementor-element elementor-element-2db4bcd elementor-widget elementor-widget-text-editor is-mac" data-id="2db4bcd" data-element_type="widget" data-widget_type="text-editor.default">
    <div class="elementor-widget-container">
      <div class="elementor-text-editor elementor-clearfix">
        <h3 class="emp-title"><a href="#" data-attr="john smith" class="modal-click">John Smith</a></h3>
      </div>
    </div>
  </div>
</div>
<div class="area-pop">
  <div class="close">X</div>
  <div class="modal-pop-content" style="">
    <h2 class="modal-pop-title">JOHN SMITH</h2>
    <div class="content-area">
      <div class="emp-photo"><img src="https://upload.wikimedia.org/wikipedia/en/thumb/1/17/Bugs_Bunny.svg/220px-Bugs_Bunny.svg.png"></div>
      <div class="emp-content-area">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Fusce luctus, tellus ut feugiat aliquet, urna metus cursus neque, a placerat quam ipsum vel augue. Nunc pellentesque euismod massa eu commodo. Ut at nulla mauris. Duis nisi mi, gravida vitae
        ornare nec, porta non ligula. Phasellus non arcu blandit, commodo sapien quis, vestibulum orci. Donec eu sollicitudin lectus. Aliquam scelerisque, nisi a accumsan volutpat, erat orci cursus nulla, in laoreet arcu libero non elit. Sed tincidunt,
        ante ut finibus egestas, mauris ante mollis quam, id scelerisque erat tortor eu massa. Aliquam eu justo ex. Donec vitae elit cursus, efficitur turpis sit amet, aliquet turpis. Vestibulum vel accumsan nunc. In aliquam felis ac tortor viverra, eget
        tempus tortor ullamcorper. In a porttitor odio. Aenean sollicitudin est eu risus faucibus, sit amet imperdiet arcu ornare.</div>
    </div>
  </div>
</div>