javascript - Css 变换比例不适用于模态卡弹出窗口

Question

我在 stackoverflow 中看到了很多基于模态的问题，因此它可能看起来与其他 stackover-flow 问题相似，但我正在寻找的设计在任何地方都找不到。这就是我问这个问题的原因。我在设计方面真的很新。当用户单击图像时，我喜欢Instagram 模式卡弹出窗口。我认为他们已经使用transform:scale()并且我尝试实现该逻辑，但似乎它不起作用。我希望卡片从scale1.2 增长到 1。我已经在片段中分享了我的代码。如果有人告诉我如何做像 instagram 这样的模态卡片弹出窗口，我会非常高兴。

const modal = document.getElementById("modal-container");
  const btn = document.getElementById("open-modal-button");
  const span = document.getElementsByClassName("close")[0];

  btn.onclick = function () {
    modal.classList.add("visible");
  };

  span.onclick = function () {
    modal.classList.remove("visible");
  };

  document.body.addEventListener("click", function (event) {
    if (event.target === modal) {
      modal.classList.remove("visible");
    }
  });

.modal {
    position: fixed;
    z-index: 10;
    padding-top: 100px;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    overflow: auto;
    background-color: rgba(0, 0, 0, 0.5);
    display: none;
  }

  /* Modal Content */
  .modal-content {
    background-color: #fefefe;
    margin: auto;
    padding: 20px;
    border: 1px solid #888;
    width: 50%;
    border-radius: 5px;
    box-shadow: 0 24px 38px 3px rgba(60, 75, 100, 0.14);
    display:none;
    opacity: 0;
    transition: transform .3s ease;
    transform: scale(1.3);
  }

  .close {
    color: #aaaaaa;
    float: right;
    font-size: 28px;
    font-weight: bold;
  }

  .close:hover,
  .close:focus {
    color: #000;
    text-decoration: none;
    cursor: pointer;
  }

  .visible {
   display: block;
   transform: scale(1);
  }

  .visible > .modal-content {
    display: block;
    transform: scale(1);
    opacity: 1;
  }

<h2>Instagram Modal popup</h2>

<!-- Trigger/Open The Modal -->
<button id="open-modal-button">Open Modal</button>

<!-- The Modal -->
<div id="modal-container" class="modal">

  <!-- Modal content -->
  <div class="modal-content">
    <span class="close">&times;</span>
    <p>Some text in the Modal..</p>
  </div>

</div>

标签： javascripthtmlcssmodal-dialog

Answer 1

如果您甚至将显示属性从无切换到阻塞，其他元素上的转换也不会发生。

您可以添加一个带有延迟 JS 调用的类，或者..

如果您的环境允许依赖关键帧动画：将所有其他转换放入关键帧动画中，它就可以工作了！\o/

@-webkit-keyframes scale {
      0% { opacity: 0; -webkit-transform: scale(1.3); }   
    100% { opacity: 1; -webkit-transform: scale(1); }
}
@-moz-keyframes scale{
      0% { opacity: 0; -moz-transform: scale(1.3); }   
    100% { opacity: 1; -moz-transform: tscale(1);}
}

const modal = document.getElementById("modal-container");
  const btn = document.getElementById("open-modal-button");
  const span = document.getElementsByClassName("close")[0];

  btn.onclick = function () {
    modal.classList.add("visible");
  };

  span.onclick = function () {
    modal.classList.remove("visible");
  };

  document.body.addEventListener("click", function (event) {
    if (event.target === modal) {
      modal.classList.remove("visible");
    }
  });

.modal {
    position: fixed;
    z-index: 10;
    padding-top: 100px;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    overflow: auto;
    background-color: rgba(0, 0, 0, 0.5);
    display: none;
  }

  /* Modal Content */
  .modal-content {
    background-color: #fefefe;
    margin: auto;
    padding: 20px;
    border: 1px solid #888;
    width: 50%;
    border-radius: 5px;
    box-shadow: 0 24px 38px 3px rgba(60, 75, 100, 0.14);
    display:none;
  }

  .close {
    color: #aaaaaa;
    float: right;
    font-size: 28px;
    font-weight: bold;
  }

  .close:hover,
  .close:focus {
    color: #000;
    text-decoration: none;
    cursor: pointer;
  }

  .visible {
   display: block;
  }

  .visible > .modal-content {
    display: block;
   -webkit-animation: scale .3s ease-out;
    -moz-animation: scale .3s ease-out;
  }
  
  
@-webkit-keyframes scale {
      0% { opacity: 0; -webkit-transform: scale(1.3); }   
    100% { opacity: 1; -webkit-transform: scale(1); }
}
@-moz-keyframes scale{
      0% { opacity: 0; -moz-transform: scale(1.3); }   
    100% { opacity: 1; -moz-transform: tscale(1);}
}

<h2>Instagram Modal popup</h2>

<!-- Trigger/Open The Modal -->
<button id="open-modal-button">Open Modal</button>

<!-- The Modal -->
<div id="modal-container" class="modal">

  <!-- Modal content -->
  <div class="modal-content">
    <span class="close">&times;</span>
    <p>Some text in the Modal..</p>
  </div>

</div>