Question

我为main div（.dashboard）做了延迟加载。但是由于动画的原因，模态不显示。这是一个例子。

@keyframes fadeIn {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}

.dashboard {
  opacity: 0;
  animation: fadeIn ease-in-out 1;
  animation-fill-mode: forwards;
  animation-duration: .5s;
  animation-delay: .25s;
  padding: 100px;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.1.1/js/bootstrap.min.js"></script>
<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.1/css/bootstrap.min.css" rel="stylesheet"/>

<div class="dashboard">
  <div>Lazy Content DIV</div>
  <div>Lazy Content DIV</div>
  <div>Lazy Content DIV</div>
  <div>Lazy Content DIV</div>
  <div>Lazy Content DIV</div>
  <div>Lazy Content DIV</div>
  <div>Lazy Content DIV</div>
  <div>Lazy Content DIV</div>
  <div>Lazy Content DIV</div>
  <div>Lazy Content DIV</div>
  <div>Lazy Content DIV</div>


  <!-- Modal Button -->
  <button type="button" class="btn btn-primary" data-toggle="modal" data-target="#testModal">Launch demo modal</button>

  <!-- Modal -->
  <div class="modal fade" id="testModal" tabindex="-1" role="dialog" aria-labelledby="exampleModalLabel" aria-hidden="true">
    <div class="modal-dialog" role="document">
      <div class="modal-content">
        <div class="modal-header">
          <h5 class="modal-title" id="exampleModalLabel">Modal title</h5>
          <button type="button" class="close" data-dismiss="modal" aria-label="Close">
            <span aria-hidden="true">&times;</span>
          </button>
        </div>
        <div class="modal-body">Modal Body</div>
     https://stackoverflow.com/questions/ask#   <div class="modal-footer">
          <button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button>
          <button type="button" class="btn btn-primary">Save changes</button>
        </div>
      </div>
    </div>
  </div>

</div>

我猜这是由于“动画填充模式”功能引起的。删除此功能时，动画不起作用。

Answer 1

这应该可以解决您的问题。尝试将其添加到样式表中-

已更新

.modal {
  animation-fill-mode: none;
}

Answer 2

使用动画和3D变换移动或更改元素时，该元素及其内容可能会提升为“ gpu图层”，因此浏览器可以独立于页面其余部分进行渲染，并在以后进行合成。这样可以隔离内容的呈现，因此，如果元素的变换是唯一在帧之间进行更改的元素，则不必重新呈现页面的其余部分，并且通常可以显着提高速度。

在您的Codepen示例中，您还可以通过将will-change: transform;添加到.dashboard元素来重现相同的行为。 Here is a codepen example。因为will-change属性会提前通知浏览器您可能对元素进行的哪些更改，以便允许浏览器提前优化其处理元素的方式。因此，浏览器会为您的元素创建一个新的gpu层。

结果，您的仪表板元素具有自己的“ GPU层”，并且浏览器无法在您的仪表板和模式元素之间呈现背景元素。

以下是您可以采取的几种解决方案：
-将模态移动到仪表板div之外。
-将背景图层移动到仪表板div中。
-完成后删除动画。

Answer 3

这可以做到：

$(function() {
  $(document).on('click tap', '[data-toggle=modal]', function() {
    const t = $($(this).data('target')).first();
    if (t.is('.modal') && t.parent().closest('div').is('div')) {
      t.appendTo('body');
    }
  });
});

首次打开模态时，将其作为body的直接子级（应放置在其位置）。

对于每个模态，仅当第一次打开模态且仅针对该模态时，放置才会发生一次。保留所有绑定的事件。

请注意，它分别适用于多种模式。通过Bootstrap自己的modal-target属性完成对每个模式的定位（这基本上意味着：如果打开了模式，则解决方案适用于该模式）。

working看到它。

在您似乎正在使用它的情况下，将其写在jQuery中。对于任何需要jQuery免费替代品的人（React Bootstrap，VueBootstrap等），这里都是香草：

document.addEventListener('DOMContentLoaded', function() {
  document.addEventListener('click', moveModal);
  document.addEventListener('tap', moveModal);

  function moveModal(event) {
    if (event.target.matches('[data-toggle=modal]')) {
      const t = event.target;
      if (t.parentElement.closest('div')) {
        const m = document.querySelector(t.dataset.target);
        if (m && m.tagName == 'DIV') {
          document.body.appendChild(m);
        }
      }
    }
  }
});

仅在Chrome中进行了测试，但是我看不出为什么它不能在任何普通浏览器中运行。如果有人发现问题，请告诉我。

注意：解决方案假定通过单击或点击具有data-target="modal"属性，也具有data-target="someSelector"属性的元素来打开模态，其中document.querySelector(someSelector)将返回模态。

如果不是这种情况，或者不是唯一的情况，一旦我有了打开模态的所有使用方法的清单（不知道全部），就可以写一个更通用的解决方案。

Answer 4

您只需要更改HTML结构即可。将块移出块<div class="dashboard">的边界

<html>
    <body>
        <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
        <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.1.1/js/bootstrap.min.js"></script>
        <link href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.1/css/bootstrap.min.css" rel="stylesheet"/>
        <style>
        @keyframes fadeIn {
          from {
            opacity: 0;
          }
          to {
            opacity: 1;
          }
        }

        .dashboard{
          opacity: 0;
          animation: fadeIn ease-in-out 1 ;
          animation-fill-mode: forwards;
          animation-duration: .5s;
          animation-delay: .25s;
          padding:100px;
        }
        </style>

        <div class="dashboard"> <!-- <<< Start dashboard DIV -->
          <div>Lazy Content DIV</div>
          <div>Lazy Content DIV</div>
          <div>Lazy Content DIV</div>
          <div>Lazy Content DIV</div>
          <div>Lazy Content DIV</div>
          <div>Lazy Content DIV</div>
          <div>Lazy Content DIV</div>
          <div>Lazy Content DIV</div>
          <div>Lazy Content DIV</div>
          <div>Lazy Content DIV</div>
          <div>Lazy Content DIV</div>

          <!-- Modal Button -->
          <button type="button" class="btn btn-primary" data-toggle="modal" data-target="#testModal">Launch demo modal</button>
        </div> <!-- <<< END dashboard DIV -->

        <!-- Modal -->
        <div class="modal fade" id="testModal" tabindex="-1" role="dialog" aria-labelledby="exampleModalLabel" aria-hidden="true">
        <div class="modal-dialog" role="document">
          <div class="modal-content">
            <div class="modal-header">
              <h5 class="modal-title" id="exampleModalLabel">Modal title</h5>
              <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                <span aria-hidden="true">&times;</span>
              </button>
            </div>
            <div class="modal-body">Modal Body</div>
         https://stackoverflow.com/questions/ask#   <div class="modal-footer">
              <button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button>
              <button type="button" class="btn btn-primary">Save changes</button>
            </div>
          </div>
        </div>
        </div>
    </body>
</html>

引导模式背景未隐藏

4 个答案: