tür özyükleme doğal sınıfları kullanarak

Question

, ben .dropdown-menu açılan menü olarak gösterilen bazı tıklanabilir seçenekler vardır ki burada .list-group-item elemanları, bir listesi, z-dizinleri karıştırmıştır. Varsayılan olarak bu, bir .list-group-item öğesinin aşağı açılan kutusunun altına düştüğünde bile düzgün çalışır. Sonra ekledim ne

, opacity:0 den opacity:1 olacak @keyframes animasyon kullanarak .list-group-item s kaybolur bir animation beyanıdır. Ve bunun bir yan etkisi olarak, her bir .list-group-item öğesi görsel olarak öncekinden açılan menüden geçiyor. Bu taşan için geçici çözüm çeşit varsa

merak ediyorum

(aslında herhangi z-index bildirimi olmadığı rol oynamaz, sadece konunun tezahürünü göstermek için başlığında bu terimi kullandım) öğeler için soluk animasyonunu sürdürmeme izin veren sorun mu?

bir örnek aşağıdaki keman görülebilir

(dahil veya o kadar Dropdowns hem sadece durumu göstermek için HTML kodundaki açık olarak beyan edilmiştir, necesarry değil orada dahil hiçbir JavaScript yoktur):

https://jsfiddle.net/o8ysz4qp/2/

HTML:

<div class="list-group-item fade-in"> 
    <div class="pull-right dropdown open"> 
    <button class="btn btn-primary"> 
     &darr; 
    </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"> 
     &darr; 
    </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; } 
} 

Answer 1

sorunlar donukluk 1 değilken yeni bir yığın bağlamı (The stacking context - CSS | MDN bakınız) bir solüsyonu (bu opaklık değişikliği sonra kullanılabilir bir hale gelir ) bir z-index ekleme ve ters olan

yaratmasıdır onların değeri

@import url('https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css'); 
 

 
.list-group-item:nth-last-child(1){z-index:1} 
 
.list-group-item:nth-last-child(2){z-index:2} 
 
.list-group-item:nth-last-child(3){z-index:3} 
 
.list-group-item:nth-last-child(4){z-index:4} 
 
.list-group-item:nth-last-child(5){z-index:5} 
 
.list-group-item:nth-last-child(6){z-index:6} 
 
.list-group-item:nth-last-child(7){z-index:7} 
 

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

<div class="list-group-item fade-in"> 
 
    <div class="pull-right dropdown open"> 
 
    <button class="btn btn-primary"> 
 
     &darr; 
 
    </button> 
 
    <ul class="dropdown-menu"> 
 
     <li><a href="#">One</a></li> 
 
     <li><a href="#">Two</a></li> 
 
     <li><a href="#">Three</a></li> 
 
     <li><a href="#">Four</a></li> 
 
    </ul> 
 
    </div> 
 
    <p>Lorem ipsum dolor sit amet</p> 
 
    <p>Lorem ipsum dolor sit amet</p> 
 
    <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"> 
 
     &darr; 
 
    </button> 
 
    <ul class="dropdown-menu"> 
 
     <li><a href="#">One</a></li> 
 
     <li><a href="#">Two</a></li> 
 
     <li><a href="#">Three</a></li> 
 
     <li><a href="#">Four</a></li> 
 
    </ul> 
 
    </div> 
 
    <p>Lorem ipsum dolor sit amet</p> 
 
    <p>Lorem ipsum dolor sit amet</p> 
 
    <p>Lorem ipsum dolor sit amet</p> 
 
</div>

(bunlar kardeş varsayarak ) gibi

şey (sonuncusu düşük z-index vb vardır) Gaby açıklandığı gibi

Answer 2

, opacity animasyon bir yığın bağlamı kurar. Her bir .list-group-item'daki opaklığı canlandırmak yerine, hepsini bir kapsayıcıya yerleştirmeniz ve orada opacity'u canlandırmanız gerekir.

@import 'https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css'; 
 
body { 
 
    opacity: 0; 
 
    animation: fade-in 2s ease; 
 
    animation-fill-mode: forwards; 
 
} 
 
@keyframes fade-in { 
 
    from { opacity:0; } 
 
    to { opacity:1; } 
 
}

<div class="list-group-item fade-in"> 
 
    <div class="pull-right dropdown open"> 
 
    <button class="btn btn-primary"> 
 
     &darr; 
 
    </button> 
 
    <ul class="dropdown-menu"> 
 
     <li><a href="#">One</a></li> 
 
     <li><a href="#">Two</a></li> 
 
     <li><a href="#">Three</a></li> 
 
     <li><a href="#">Four</a></li> 
 
    </ul> 
 
    </div> 
 
    <p>Lorem ipsum dolor sit amet</p> 
 
    <p>Lorem ipsum dolor sit amet</p> 
 
    <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"> 
 
     &darr; 
 
    </button> 
 
    <ul class="dropdown-menu"> 
 
     <li><a href="#">One</a></li> 
 
     <li><a href="#">Two</a></li> 
 
     <li><a href="#">Three</a></li> 
 
     <li><a href="#">Four</a></li> 
 
    </ul> 
 
    </div> 
 
    <p>Lorem ipsum dolor sit amet</p> 
 
    <p>Lorem ipsum dolor sit amet</p> 
 
    <p>Lorem ipsum dolor sit amet</p> 
 
</div>