Question

我创建了一个菜单，当它超过屏幕的某个点时会调整自己。一切都很好，除了过渡和Chrome之外。我尝试添加转换的-webkit版本，但它也不起作用。

这是我的CSS

.past-main {
    height: 97px !important;
    margin-left: -40px;
    width: 100%;
    top: 0px !important;
    position: absolute;
   -webkit-transition: height 300ms opacity 300ms top 300ms ease 0s;
   transition: height 300ms, opacity 300ms,top 300ms ease 0s;
   opacity: 1!important;
   height: 90px !important;
   margin-top:0px !important;


}
.past-maina {
    -webkit-transition: top 800ms ease 0s;
    transition: top 800ms ease 0s!important;
    top:0px!important;

}
.past-mainb {
    -webkit-transition: all 800ms ease 0s;
    transition: all 800ms ease 0s;
    margin-top:0px!important;

}

Answer 1

要添加更多上下文，标题菜单的各个级别会在用户滚动到某个点时应用这些类：

一些包装元素获得past-maina和past-main
每个菜单项（它们是li元素）获取past-mainb

在向下滚动之前，每个菜单项都有不同的margin-top值;之后他们都得到0。这些是使用样式规则设置的，如

.desktop-nav ul li:nth-child(1) {
    margin-top: -10px;
}

现在，这个选择器有一个higher specificity（22）而不是.past-mainb选择器（10），我猜，这就是你为后者添加!important注释的原因。规则：否则，它不会生效。

但这会产生不良副作用：important declarations always win over transitions！因此，如果您希望转换生效，则无法使用!important。

简单的欺骗是提高“过去的主要”风格规则的特殊性。例如，添加ID选择器。或者更好：不是在用户滚动时添加一个类，而是删除一个“before main”类，并重写所有给出特定菜单项边距的规则来使用它：

.desktop-nav.before-main ul li:nth-child(1) {
    margin-top: -10px;
}

Chrome Transitions不起作用。所有其他浏览器

1 个答案: