CSS过渡未在jQuery模态上运行

Question

这可能是我本周遇到的最不困难的问题。我正在动态加载来自JSON的数据并填充模式中的字段。作为用户体验的爱好者，我希望模态能够扩展。我对此脚本的更改开放，因为它成功地完成了我需要做的事情。

问题打开模式时(通过单击标题(。jQuery添加了开始过程的父(覆盖(。当模态打开时，内部(模态pop-content(已经在1中缩放，而不是在1开始。我已经完成了延迟。而且在我的JS中，我使用CSS内联添加了转换：比例(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中，然后在 .area-pop之后将 active类添加到模态内容中，然后使用 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>