Geçiş gecikmesini nasıl geçersiz kılabilirim?

Question

Çalışma Çözümü: http://jsfiddle.net/tddfevhv/1/

Açılır menü türü yapıyorum ve bazı geçişler liste öğelerime güzel bir animasyon efekti vermek için gecikiyor. Bununla birlikte, bu gecikme, arka plan rengindeki değişimin üzerinde durgunluğun istenenden daha yavaş olmasına neden olur. https://jsfiddle.net/neuafy6j/1/

Ve burada kodudur:

jsFiddle bir bağlantı burada ben bir geçiş-gecikmeye ayarlama çalıştı

.profile-list li { 
     -webkit-transform-origin: 50% 0%; 
     -o-transform-origin: 50% 0%; 
     transform-origin: 50% 0%; 
     -webkit-transform: perspective(60px) rotateX(-90deg); 
     -o-transform: perspective(60px) rotateX(-90deg); 
     transform: perspective(60px) rotateX(-90deg); 
     -moz-box-shadow: 0px 2px 10px rgba(0,0,0,0.05); 
    } 

    .profile-container:hover .profile-list .fourth { 
     transition-delay: 0.6s; 
     -o-transition-delay: 0.6s; 
     transition-delay: 0.6s; 
    } 

    .profile-list li a{ 
     display: block; 
    } 


    .profile-list .first { 
     -webkit-transition: 0.2s linear 0.8s; 
     -o-transition: 0.2s linear 0.8s; 
     transition: 0.2s linear 0.8s; 
    } 

    .profile-list .second { 
     -webkit-transition: 0.2s linear 0.6s; 
     -o-transition: 0.2s linear 0.6s; 
     transition: 0.2s linear 0.6s; 
    } 

    .profile-list .third { 
     -webkit-transition: 0.2s linear 0.4s; 
     -o-transition: 0.2s linear 0.4s; 
     transition: 0.2s linear 0.4s; 
    } 

    .profile-list .fourth { 
     -webkit-transition: 0.2s linear 0.2s; 
     -o-transition: 0.2s linear 0.2s; 
     transition: 0.2s linear 0.2s; 
    } 

    .profile-container:hover .profile-list li { 
     -webkit-transform: perspective(350px) rotateX(0deg); 
     -o-transform: perspective(350px) rotateX(0deg); 
     transform: perspective(350px) rotateX(0deg); 
     -webkit-transition: 0.2s linear 0s; 
     -o-transition: 0.2s linear 0s; 
     transition: 0.2s linear 0s; 
    } 

    .profile-container:hover .profile-list .second { 
     -webkit-transition-delay: 0.2s; 
     -o-transition-delay: 0.2s; 
     transition-delay: 0.2s; 
    } 

    .profile-container:hover .profile-list .third { 
     -webkit-transition-delay: 0.4s; 
     -o-transition-delay: 0.4s; 
     transition-delay: 0.4s; 
    } 




     .profile-list li:hover{ 
     background-color: #e0e0e0; 

    } 

: .2s önemli;! ama bu yardımcı olmadı.

* Bonus sorusu: Şu anda mobil bir dokunuş, menüyü uygun animasyonla açar. Ancak onu kapatmanın tek yolu, sayfayı yeniden yükleyen bağlantıların tıklanmasıdır. Sayfayı yeniden yüklemeyi durdurmak için jQuery ile varsayılan davranışı döndürürsem, menüyü kapatmaz. Mobil cihazdaki menüyü nasıl kapatabilirim?

Answer 1

DÜZENLEME - Geliştirilmiş cevap İşte

ile geliştirilmiş JSFiddle https://jsfiddle.net/neuafy6j/4/

bu sefer li ama çapa etiketine background-değişiklik yapmaktı hiledir. Ben önceki li etiketi dolguyu aldı çapa onu ekledi ve bir cazibe gibi çalışır:

.profile-list ul li a{ 
    display: block; 
    background-color: #fff; 
    transition: background-color 0.5s ease; 
    padding: 15px 10px; 
    } 
.profile-list ul li a:hover { 
    background-color: #E0E0E0; 
    } 

---

Önceki cevabı: Bu JSFiddle size yardımcı olabilir

https://jsfiddle.net/neuafy6j/2/.

.profile-list li { 
     cursor: pointer; 
     background: #ffffff; 
     border-top: 1px solid #e5e6e6; 
     padding: 15px 10px; 
     transition: background-color 0.5s ease!important; 
    } 
    .profile-list li:hover{ 
     background-color: #e0e0e0; 
    } 

Bu önemli kısımdır. Özellikle arka plan rengine özel olarak odaklanan önemli bir etiketle geçiş ekledim. Önemli olan dışarıda bırakılabilir, ancak güncel bir Mozzilla'da bunu gerekli buldum.

Yardım edin!