Question

我使用Bootstrap创建了一个模式，当出现错误时该模式会弹出。在模态仍处于打开状态时，可以多次触发该错误。现在，模态只是停留在那里。我想知道是否有一种方法可以在错误一次又一次触发时在模态上创建一些反弹效果，从而使用户知道他们一次又一次触发同一错误。

Answer 1

您需要删除/添加对每个错误都具有弹跳效果的类...由于您的问题中没有具体内容，我在模态中添加了一个按钮，您可以按此按钮以查看此删除/添加的内容弹跳类

工作片段如下：

$("#makeBounce").click(function() {
  $(".modal-content").removeClass('bouncer');
  setTimeout(function() {
    $(".modal-content").addClass('bouncer');
  }, 50);
});

.bouncer {
  animation: bounce 2s ease-in-out;
}

@keyframes bounce {
  10% {
    margin-top: 10%;
    border: 1px solid red;
  }
  50% {
    margin-top: -20%;
    border: 1px solid blue;
  }
  90% {
    margin-top: 0%;
    border: 1px solid green;
  }
}

.modal-backdrop.show {
  display: none;
}

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.16.0/umd/popper.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.4.1/js/bootstrap.min.js"></script>

<div class="container">
  <h2>Modal Example</h2>
  <!-- Button to Open the Modal -->
  <button type="button" class="btn btn-primary" data-toggle="modal" data-target="#myModal">
    Open modal
  </button> <br/>

  <!-- The Modal -->
  <div class="modal" id="myModal">
    <div class="modal-dialog">
      <div class="modal-content bouncer">

        <!-- Modal Header -->
        <div class="modal-header">
          <h4 class="modal-title">Modal Heading</h4>
          <button type="button" class="close" data-dismiss="modal">&times;</button>
        </div>

        <!-- Modal body -->
        <div class="modal-body">
          Modal body.. <br/>
          <button type="button" class="btn btn-danger" id='makeBounce'>click me to trigger error</button>

        </div>

        <!-- Modal footer -->
        <div class="modal-footer">
          <button type="button" class="btn btn-danger" data-dismiss="modal">Close</button>
        </div>

      </div>
    </div>
  </div>

</div>

引导模式重新触发弹跳效果？

1 个答案: