忽略引導模式關閉過渡效果，以淡出緩慢

Question

爲了設計的緣故，我自定義Bootstrap modal transition類似於下面的代碼，但是當關閉模式時，它會很快消失而沒有過渡。問題是，如何在關閉所有模態時添加轉換淡出效果？任何幫助將非常感激。

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); 
} 

注：我試圖jQuery來處理淡出，但沒有運氣。

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

演示：

.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

試試這個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 ; 
} 

也不會從HTML代碼中刪除fade類。否則，引導效果將不起作用。

DEMO這裏https://jsfiddle.net/9w0gstq4/