遷移遅延をどのように無効にすることができますか？

Question

作業中のソリューション：http://jsfiddle.net/tddfevhv/1/

私はドロップダウンタイプのメニューを作成しています。いくつかのトランジションは、私のリストアイテムに素晴らしいアニメーション効果を与えるために遅れています。

しかし、この遅延は、ホバーの背景色の変更が望ましいものよりも遅くなる原因になります。

jsFiddleへのリンクはこちらです：

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

    } 

私は、遷移遅延設定しようとした：https://jsfiddle.net/neuafy6j/1/

そしてここでは、コードです！.2sが重要。しかしそれは役に立たなかった。

*ボーナスに関する質問：現在、モバイル上のタップは適切なアニメーションでメニューを開きます。しかし、私がそれを閉じるために見つけた唯一の方法は、ページをリロードするリンクをクリックすることです。ページのリロードを停止するためにjqueryでデフォルトの動作を変更しても、メニューは閉じません。モバイルデバイスのメニューを閉じるにはどうしたらいいですか？

Answer 1

EDIT - 改善の答えと

ここでは、改善されたJSFiddle https://jsfiddle.net/neuafy6j/4/

この時間はない李になく、アンカータグに背景の変更を作ることだったトリックです。私は、以前のliタグからパディングを取ったアンカーにこれを追加しましたし、それは魔法のように動作します：

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

---

前の答え：

https://jsfiddle.net/neuafy6j/2/このJSFiddleはあなたを助けるかもしれませんが。

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

これは重要な部分です。背景色のみに特に焦点を当てた重要なタグを付けてトランジションを追加しました。 ！重要なものは除外されるかもしれませんが、最新のMozzillaでは必要なものが見つかりました。

希望しました！