如何覆盖转换延迟？

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 标记的过渡，该标记只专注于背景颜色。 !important 可能会被忽略，但在最新的 Mozzilla 上我发现它是必要的。

希望对您有所帮助！