Question

这可能是我在本周遇到的最困难的问题。我正在从JSON动态加载数据并在Modal中填充字段。作为用户体验的爱好者，我希望Modal能够扩大规模。我愿意对此脚本进行更改，使它成功地完成了我需要做的事情。

问题当您打开模态时（通过单击标题）。 jQuery将.active添加到父级（覆盖层），从而开始该过程。当模式打开时，内部（modal-pop-content）已经缩放为1而不是从1开始。我已经做了延迟。同样在我的JS中，我使用CSS内联添加了以下转换：scale（1）。

这是我正在处理的Codepen。 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使其正常工作，然后在{strong>使用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;
});

CSS过渡未在jQuery模式下运行

1 个答案: