javascript - 如何制作警报动画？

Question

我尝试使用JS来显示警报并使其自动消失。 但是，我想让它慢慢消失。如何给它添加动画呢？ 我还希望警报始终位于窗口中央。

socket.on('message', function (dataContent) {
  
  $( document ).ready(function() { $('#myModal').modal('show'); });


    setTimeout(showAlert(1), 3000);

});

function showAlert(hideAfter) {
    $('#myModal').modal('show');
    if(hideAfter) {
        setTimeout(fadeItOut, 5000);
    }
}

function fadeItOut() {
    $('#myModal').modal('hide');
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<!-- Modal -->
  <div class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel">
    <div class="modal-dialog" role="document">
      <div class="modal-content">
        <div class="modal-header">
          <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>
          <h4 class="modal-title" id="myModalLabel">Modal title</h4>
        </div>
        <div class="modal-body">
          Your "alert" message here.
        </div>
        <div class="modal-footer">
          <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
        </div>
      </div>
    </div>
  </div>



<link rel="stylesheet" href="//cdn.bootcss.com/bootstrap/3.3.5/css/bootstrap.min.css">
<!--link rel="stylesheet" href="//cdn.bootcss.com/bootstrap/3.3.5/css/bootstrap-theme.min.css"-->
<script src="//cdn.bootcss.com/jquery/1.11.3/jquery.min.js"></script>
<script src="//cdn.bootcss.com/bootstrap/3.3.5/js/bootstrap.min.js"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-select/1.9.4/css/bootstrap-select.min.css">
<script src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-select/1.9.4/js/bootstrap-select.min.js"></script>

Answer 1

您可以使用 CSS3 动画。例如，在 Chrome 中，定义 CSS 如下:

#success-alert {
  -webkit-animation: fadein 2s;
}

@keyframes fadein {
    from { opacity: 0; }
    to   { opacity: 1; }
}