ブートストラップ/ jQueryフェード不透明遷移が動作しない

Question

私は誰かが助けることを望んでいます！

私は、既存のjQuery/CSSサイトにブートストラップサポートを追加しようとしています。ブートストラップを実現することを除けば、私が修正しなければならないフォーマットの束を変えます。それは、私が持っているポップアップの変遷に影響を与えているように思えます。私はあなたが助けることができる、ありがとう！

通常のjQuery/CSS（UIではなく）では、私はポップアップするモーダルダイアログボックスを作成しています。

BEFOREブートストラップ - ポップアップボックスで「フェードする」（つまり、不透明度/アルファ）。ただし、ブートストラップ.css/.jsを追加した後は、今度は とすると背景が灰色になり、完全に不透明になります。

どうすれば修正できますか？

これは、私はちょうどjQueryの/ CSSでこの "作品"

function showModal() { 

var m = $('.sample-dialog'); 
var o = m.find('.modal-overlay'); 
var c = m.find('.modal-content'); 
var b = c.find('.modal-body'); 

m.css('display','block'); 

o.animate({'opacity':.8},350); 
b.animate({'opacity':1,'margin-top':0},350,function() { 
    c.css('overflow-y','auto'); 
}); 
} 

を呼び出してjQueryのポップアップコードだけCSS/jQueryを使って動作するコード

<div class=sample-dialog> 
    <div class=modal-overlay> 
    <div class=modal-content> 
     <div class=modal-body> 
     random content 
     </div> 
    </div> 
    </div> 
</div> 

です。

しかし、すぐに私は、ブートストラップの.js /私のヘッダー内の.cssファイルを追加すると、まったく同じ遷移は今何不透明度（ちょうどグレーアウト背景）を示していません。

修正方法はありますか？

2番目のこととして、ブートストラップファイルが追加されていることに気がつきました。移行は、私が持っていた素敵な「滑らかな」ものとは対照的に、「不安定」であるようです。それについての洞察があれば、それは素晴らしいことでしょう！

ありがとうございました！

Answer 1

ブートストラップトランジションのルールが競合している可能性があります。バージョン4.0.0-alpha.6で作業していたことを覚えています。モデルの高さの遷移を変更できませんでした。

これらは、私はあなたを助けることができると思いモーダル推移（.fadeクラスと ）

_transitions.scss

.fade.show { 
    opacity: 1; 
} 
.fade { 
    opacity: 0; 
    -webkit-transition: opacity 0.15s linear; 
    -o-transition: opacity 0.15s linear; 
    transition: opacity 0.15s linear; 
    transition-property: opacity; 
    transition-duration: 0.15s; 
    transition-timing-function: linear; 
    transition-delay: initial; 
} 

これのデフォルト値になります。ブートストラップバージョンが助けにはならないが、それは私が一緒に働いてきた唯一のバージョンかどう

は、さまざまなコンポーネント

$enable-transitions: true (default) or false 

Documentation bootstrap@4.0.0-alpha.6 /Customizing variables

申し訳上の所定の遷移を可能にします。