bootstrap模態動畫用animate.css打開/關閉

任何人都可以幫助我，當引導模式打開和關閉時，如何使用動畫CSS樣式進行動畫製作？由於Modal打開它應該打開與淡入效果，同時關閉它應該與淡出效果。bootstrap模態動畫用animate.css打開/關閉

我想使用animate.css css樣式表爲動畫模式poup打開和關閉。它應該添加類fadeIn而打開模型，同時關閉模式它應該添加類fadeOut。（類.fadeIn & .fadeOut從aniamte.css樣式表）

2017-07-17 Vijay Patil

[CSS如何使一個元素淡入然後淡出？]的可能重複（https://stackoverflow.com/questions/30125705/css-how-to-make-an-element-fade-in-和 - 則 - 淡出） – Adonis

添加fade到您的情態標記的類屬性：

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous"> 
 
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js" integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa" crossorigin="anonymous"></script> 
 

 
<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 with animation</h4> 
 
     </div> 
 
     <div class="modal-body"> 
 
     Close modal to see <i>fade-out</i> effect. 
 
     </div> 
 
    </div> 
 
    </div> 
 
</div> 
 
<button type="button" class="btn btn-primary" data-toggle="modal" data-target="#myModal"> 
 
    Open modal with <i>fade-in</i> effect 
 
</button>

從你的語氣標記刪除.fade類只是出現一個。詳情請參閱Remove animation部分。

來源

2017-07-17 06:15:32 Alexander

$('.modal').on('show.bs.modal', function (e) { 
    $('.modal .modal-dialog').attr('class', 'modal-dialog fadeIn animated'); 
    }) 
    $('.modal').on('hide.bs.modal', function (e) { 
    $('.modal .modal-dialog').attr('class', 'modal-dialog fadeOut animated'); 
})

這是我想要的。

來源

2017-07-17 09:36:56

bootstrap模態動畫用animate.css打開/關閉

回答

相關問題