Override Bootstrap Modal schließen Übergangseffekt langsam auszublenden

Question

für Design Willen, ich anpassen Bootstrap modal transition zu etwas wie der Code unten, aber beim Schließen der modalen, es verschwindet schnell ohne Übergang. Frage ist, wie kann ich einen Übergangsausblendungseffekt hinzufügen, wenn ich alle modals schließe? Jede Hilfe würde sehr geschätzt werden.

CSS:

.fade-custom { 
    opacity: 0; 
    -webkit-transition: all .30s linear; 
    -o-transition: all .30s linear; 
    transition: all .30s linear; 
    transform: scale(0); 
} 

.fade-custom.in { 
    opacity: 1; 
    transform: scale(1); 
} 

Hinweis: Ich habe versucht, jquery fadeOut zu handhaben, aber kein Glück.

$(".close-help").click(function() { 
    $("#helpReviewers").fadeOut("slow", function() { 
    }); 
}); 

Demo:

.fade-custom { 
 
    opacity: 0; 
 
    -webkit-transition: all .30s linear; 
 
    -o-transition: all .30s linear; 
 
    transition: all .30s linear; 
 
    transform: scale(0); 
 
} 
 

 
.fade-custom.in { 
 
    opacity: 1; 
 
    transform: scale(1); 
 
}

<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"></script> 
 
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/> 
 

 

 
<button type="button" class="btn btn-info btn-lg" data-toggle="modal" data-target="#myModal">Open Modal</button> 
 

 
<!-- Modal --> 
 
<div id="myModal" class="modal fade-custom" role="dialog"> 
 
    <div class="modal-dialog"> 
 

 
    <!-- Modal content--> 
 
    <div class="modal-content"> 
 
     <div class="modal-header"> 
 
     <button type="button" class="close " data-dismiss="modal">&times;</button> 
 
     <h4 class="modal-title">Modal Header</h4> 
 
     </div> 
 
     <div class="modal-body"> 
 
     <p>Some text in the modal.</p> 
 
     </div> 
 
     <div class="modal-footer"> 
 
     <button type="button" class="btn btn-default" data-dismiss="modal">Close</button> 
 
     </div> 
 
    </div> 
 

 
    </div> 
 
</div>

Answer 1

versuchen, diese CSS

.fade-custom { 
    -webkit-transition: all .30s linear !important ; 
    -o-transition: all .30s linear !important ; 
    transition: all .30s linear !important ; 
    transform: scale(0) !important ; 
} 

.fade.in { 
    transform: scale(1) !important ; 
} 

auch fade Klasse von HTML-Code nicht entfernen. Andernfalls funktioniert der Bootstrap-Effekt nicht.

DEMO HIERhttps://jsfiddle.net/9w0gstq4/