在JavaScript和HTML中具有滑动动画的模态框

Question

我创建了一个简单的模式对话框，如下面的代码所示，该对话框将用于在Web表单的某些位置添加帮助。

我想添加一个滑动动画效果，以使对话框在模式打开时滑入屏幕，并在模式关闭时滑回屏幕：

我找不到想要实现的解决方案。我的模态代码当前如下所示：

function openModal(mod_name){
  var modal = document.getElementById(mod_name);
  modal.style.display = "block";
  window.onclick = function(event) {
    if (event.target == modal) {
      modal.style.display = "none";
    }
  }
}
function closeModal(mod_name){
  var modal = document.getElementById(mod_name);
  modal.style.display = "none";
}

<style>
  body {font-family: Arial, Helvetica, sans-serif; background-color: red; }
  .modal { display: none; position: fixed; z-index: 1; padding-top: 100px; left: 0; top: 0; width: 100%; height: 100%; overflow: auto; background-color: rgba(255,255,255,0.8); }
  .modal-content { margin: auto; padding: 20px; width: 80%; }
  .close { color: #323232; float: right; font-size: 28px; font-weight: bold; }
  .close:hover, .close:focus { color: #424242; text-decoration: none; cursor: pointer; }
</style>
<h2>Modal Example</h2>
<button id="oModal" onclick="openModal('myModal1')">Open Modal</button>

<div id="myModal1" class="modal modal_move">
  <div class="modal-content">
    <button id="cModal" class="close" onclick="closeModal('myModal1')">&times;</button>
    <p>Some text in the Modal...</p>
  </div>
</div>

Answer 1

一种方法可能是使用 CSS3transition和transform规则来实现模态所需的滑入/滑出动画效果。

一种方法是添加 CSS 规则来modal定义默认转换和转换行为，以及open定义transform模态可见时的修饰符类：

/* Updated CSS with open selector */
.modal.open {
  transform: translateX(0px);
}

.modal {
  /* Update CSS with transition and transform rules */
  transition: transform 1s linear;
  transform: translateX(-100%);
}

接下来，您将替换规则的内联样式更改display，并使用逻辑来切换元素open上的类，modal如下所示：

// Add open class to toggle "open" mode
modal.classList.add('open');

// Remove open class to "hide" modal
modal.classList.remove('open');

这两个想法可以与您现有的代码结合起来，如下所示：

/* Updated CSS with open selector */
.modal.open {
  transform: translateX(0px);
}

.modal {
  /* Update CSS with transition and transform rules */
  transition: transform 1s linear;
  transform: translateX(-100%);
}

// Add open class to toggle "open" mode
modal.classList.add('open');

// Remove open class to "hide" modal
modal.classList.remove('open');

function openModal(mod_name) {
  var modal = document.getElementById(mod_name);

  // Add open class to make visible and trigger animation
  modal.classList.add('open');
}

function closeModal(mod_name) {
  var modal = document.getElementById(mod_name);
  // Remove open class to hide and trigger animation
  modal.classList.remove('open');
}