如何覆盖转换延迟？

Question

工作解决方案：http://jsfiddle.net/tddfevhv/1/

我正在构建一个下拉类型菜单，并且某些转换正在延迟，以便为我的列表项提供良好的动画效果。

但是，这种延迟会导致我在悬停时的背景颜色变化慢于所需的速度。

jsFiddle的链接在这里：https://jsfiddle.net/neuafy6j/1/

以下是代码：

.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！important;但这没有帮助。

*奖金问题：目前点按手机会打开菜单并显示正确的动画。然而，我发现关闭它的唯一方法是单击重新加载页面的链接。如果我使用jquery关闭默认行为来停止页面重新加载，它不会关闭菜单。如何关闭移动设备上的菜单？

Answer 1

编辑 - 改进了答案

这是改进的JSFiddle https://jsfiddle.net/neuafy6j/4/

这一次的诀窍是让背景改变不是li而是改为锚标签。我从之前的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; 
    }

这是重要的部分。我添加了一个带有！important标签的转换，专门针对背景颜色。重要的！可能会被遗漏，但在最新的Mozzilla上我发现它是必要的。

希望它有所帮助！