アニメーションをアラートにする方法は？

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

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

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

 
// Jquery has loaded 
 
$(document).ready(function() { 
 
    setTimeout(showAlert(1), 3000); 
 
});

.fade { 
 
    opacity: 0; 
 
    -webkit-transition: opacity 2.25s linear !important; 
 
     -moz-transition: opacity 2.25s linear !important; 
 
     -ms-transition: opacity 2.25s linear !important; 
 
     -o-transition: opacity 2.25s linear !important; 
 
      transition: opacity 2.25s linear !important; 
 
}

<script src="https://code.jquery.com/jquery-1.12.3.js"></script> 
 

 
<!-- Latest compiled and minified CSS --> 
 
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" integrity="sha384-1q8mTJOASx8j1Au+a5WDVnPi2lkFfwwEAa8hDDdjZlpLegxhjVME1fgjWPGmkzs7" crossorigin="anonymous"> 
 

 
<!-- Optional theme --> 
 
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap-theme.min.css" integrity="sha384-fLW2N01lMqjakBkx3l/M9EahuwpSfeNvV63J5ezn3uZzapT0u7EYsXMjQV+0En5r" crossorigin="anonymous"> 
 

 
<!-- Latest compiled and minified JavaScript --> 
 
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js" integrity="sha384-0mSbJDEHialfmuBBQP6A4Qrprq5OVfW37PRR3j5ELqxss1yVqOtnepnHVP9aJ7xS" crossorigin="anonymous"></script> 
 

 

 
<!-- Button trigger modal --> 
 
<button type="button" class="btn btn-primary btn-lg" data-toggle="modal" data-target="#myModal"> 
 
    Launch demo modal 
 
</button> 
 

 

 

 
<!-- 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>

あなたの代わりに、ブートストラップモーダルを使用して検討していますか？

http://getbootstrap.com/javascript/#modals

アラートボックスよりもはるかに良い、それをスタイルともそれがフェードアウトできるようにするためにタイムアウト機能を設定することができます。 jqueryとブートストラップを使用するオプションがありますか？もしそうなら、私はあなたのためのシンプルなデモを一緒に投げてうれしいです。

あなたがリクエストした初期機能を表示するように編集されました。ここから変更したいのであれば教えてください。私は喜んで支援します。

基本的には、jqueryがロードされるとすぐにアラートをトリガーするタイムアウト関数を設定し、数秒後にそれを非表示にする別のタイムアウト関数を設定しました。ボタンをクリックしてモーダルをトリガーすることもできます。

showAlert（0）を呼び出してモーダルを表示し、それを自動的に閉じることはできません。同様に、いつでもfadeItOut（）を呼び出して隠すことができます。

Answer 2

あなたはCSS3アニメーションを使用することができます。 Chromeで例えば、のようなCSSを定義します。

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

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