11
使用Bootstrap的本地類，我有一個.list-group-item元素列表，其中有一些可點擊的選項，在.dropdown-menu中顯示爲下拉列表。默認情況下，這可以正常工作，即使一個.list-group-item元素的下拉列表超過了它的下拉列表。添加一個`動畫`聲明混淆了z-indexes，這種類型的
我已經添加了什麼話，是animation聲明，通過使用@keyframes動畫會從opacity:0到opacity:1在.list-group-item小號變淡。而作爲一個副作用，每個.list-group-item元素都會從前一個元素的下拉菜單中直觀顯示。
（有沒有實際參與任何z-index聲明，我只用這個詞在標題來說明問題的表現）我想知道
是否有某種解決辦法的這個滿溢問題，這將允許我保持元素的淡入動畫？
一個例子，可對下小提琴可以看出（沒有的JavaScript涉及或包括有，因爲它是不necesarry，因此兩者的下拉菜單中只是宣佈爲HTML代碼開放來說明情況）：
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; }
}
是啊！我猜，爲了增加一個評論，（因爲我的頁面實際上不是由'list-group-item' divs，而是表格行組成的），需要一個'position：relative'聲明。 –
順便說一句，我必須等待23小時，給你200點的賞金獎勵，所以像...我不知道... Stackoverflow的東西...我想你會得到它自動時，我接受你的答案，我不知道現在這意味着什麼，我可以決定不僅僅因爲我是個雞巴就給你。的Bleh ... –
@ImNotMike你不需要過早地獎勵賞金。由於您接受了答案，它將在7天后自動授予（寬限期爲8）。見http://stackoverflow.com/help/bounty – Oriol