11
ブートストラップのネイティブクラスを使用して、.list-group-item要素のリストが表示されます。この中には、クリック可能なオプションがいくつかあります（.dropdown-menuにドロップダウンとして表示されます）。デフォルトでは、1つの.list-group-item要素のドロップダウンがその要素の下にある場合でも、正常に動作します。私はその後、追加した何アニメーション宣言を追加すると、
は、opacity:0からopacity:1に行く@keyframesアニメーションを使用して.list-group-itemのフェードインanimation宣言です。そしてその副作用として、すべての.list-group-item要素が前のドロップダウンメニューから視覚的に表示されます。この溢れの回避策のいくつかの種類がある場合
は、私は疑問に思って
（実際にはどのz-index宣言がそこに関与していない、私は唯一の問題の症状を説明するためにタイトルにその用語を使用しました）要素のフェードインアニメーションを維持することができますか？
は（関与またはそのようにドロップダウンの両方がちょうど状況を説明するためにHTMLコードで開いとして宣言され、necesarryされていないとして、そこに含まれる一切のjavascriptありません）：
https://jsfiddle.net/o8ysz4qp/2/
HTML：
<div class="list-group-item fade-in">
<div class="pull-right dropdown open">
<button class="btn btn-primary">
↓
</button>
<ul class="dropdown-menu">
<li><a href="#">One</a></li>
<li><a href="#">Two</a></li>
<li><a href="#">Three</a></li>
</ul>
</div>
<p>Lorem ipsum dolor sit amet</p>
</div>
<div class="list-group-item fade-in">
<div class="pull-right dropdown open">
<button class="btn btn-primary">
↓
</button>
<ul class="dropdown-menu">
<li><a href="#">One</a></li>
<li><a href="#">Two</a></li>
<li><a href="#">Three</a></li>
</ul>
</div>
<p>Lorem ipsum dolor sit amet</p>
</div>
CSS：
.fade-in {
opacity: 0;
animation:fade-in .5s ease;
animation-fill-mode: forwards;
animation-delay:1s;
}
@keyframes fade-in {
from { opacity:0; }
to { opacity:1; }
}
うん！もう1つの発言を追加するには、（私のページは実際に 'list-group-item' divsではなくテーブル行で作られているので）' position：relative'宣言が必要です。 –
Btw私はあなたに200ポイントの賞金の報酬を与えるために23時間待たなければならない、そういうわけで...私は知らない... Stackoverflow stuff ...私はあなたが私の答えを受け入れると自動的にそれを得るだろうと思ったこれが今何を意味しているのかわからない、ただ私がディックなのでちょうどそれをあなたに与えないことを決定することができますか？ブリー... –
@ImNotMike賞品を早めに賞与する必要はありません。回答を受け入れたので、7日後に自動的に授与されます（猶予期間は8日間）。 @Oriolが言ったこと、http：//stackoverflow.com/help/bounty – Oriol