CSSトランジションはお互いに優先しますか？

Question

私は2つのcol-md-6クラスを持っていて、それぞれクリックすると、toggleClass()のcol-md-6とcol-md-12の間のjQueryを使用し、もう一方を非表示にします。また、CSSトランジションを使用してトグルをアニメーション化しますが、1つのクラスでは機能し、他のボタンをクリックしてもトランジションは機能しません。

複数のクラスセレクタがトランジションに問題を起こしますか？ここで

.hello, .bye{ 
    -webkit-transition: width 500ms; 
    -moz-transition: width 500ms; 
    -o-transition: width 500ms; 
    transition: width 500ms; 
} 

は、あなたの質問は少しあいまいです jsfiddle

Answer 1

で問題ですので、最終結果は何（たくさんのようになりますように、私は、自分自身時にそれを取り、あなたのコードにいくつかの必要な変更を加えおそらく）あなたの心の中にあります。

CSS注：

• それぞれ#btn1と#btn2オーバーフロー.helloと.byeを避けるために、あなたはoverflow: hiddenを使用する必要があります。遷移中.helloと.byeラッピングを避けるために

• の両方のための十分な余地がない場合は、あなたが使用する必要があります。padding: 0。

• ボタンを正確な位置（15pxインデントされた位置）に維持するには、margin-left: 15pxを使用します。

CSSコード：

.hello, 
.bye { 
    padding: 0; 
    overflow: hidden; 
    -webkit-transition: width 500ms; 
    -moz-transition: width 500ms; 
    -o-transition: width 500ms; 
    transition: width 500ms; 
} 

#btn1, 
#btn2 { 
    margin-left: 15px; 
} 

---

JS注：

• あなたは基本的に何度も同じコードを繰り返してあなたのコードは一種の非効率的です、私はあなたのために両方のボタンに使用できる関数を作成しました。

JSコード：

は以下に完全なJavaScriptコードをチェックアウト：

• Codepen： → here。

• jsFiddle： → here;