Bootstrap Modal Animation öffnen/schließen mit animate.css

Bitte kann mir jeder helfen, wie kann animieren css Stile verwendet werden, um zu animieren, während Bootstrap Modal öffnet und schließt? Als Modal Open sollte es mit FadeIn-Effekt geöffnet sein und beim Schließen sollte es mit FadeOut-Effekt arbeiten.Bootstrap Modal Animation öffnen/schließen mit animate.css

Ich wollte animate.css CSS-Stylesheet für animierte Modal Poup öffnen und schließen. Es sollte die Klasse fadeIn beim Öffnen von Model hinzugefügt werden und beim Schließen des Modals sollte die Klasse fadeOut hinzugefügt werden. (Klasse .fadeIn & .fadeOut sind aus aniamte.css Sheet)

Quelle

2017-07-17 Vijay Patil

Mögliches Duplikat von [CSS, wie man ein Element einblendet und dann ausblendet?] (Https://stackoverflow.com/questions/30125705/css-how-to-make-an-element-fade-in- und-dann-Ausblenden) – Adonis

hinzufügen fade Klasse Attribut des modalen Markup:

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

Entfernen Sie die .fade Klasse von Ihrem modalen Markup einfach eins erscheinen. Details siehe Abschnitt Remove animation.

Quelle

2017-07-17 06:15:32 Alexander

Dies ist ich wollte.

Quelle

2017-07-17 09:36:56

Bootstrap Modal Animation öffnen/schließen mit animate.css

Antwort

Verwandte Themen