我如何让这个 CSS 转换工作？答案

【问题标题】：How Do I Get This CSS Transition Working?我如何让这个 CSS 转换工作？
【发布时间】：2021-05-05 02:43:39
【问题描述】：

我遇到了一个似乎无法正常工作的 CSS 过渡问题。基本上，当用户向下滚动时，一个类被添加到标题中以将“top”属性设置为减号，因此它被隐藏，并且当用户向上滚动时，“top”属性设置回 0。但是要进行的转换看起来不错不工作。

开发站点可以在这里找到 - http://polarpc.co.uk/home/

如果你检查 header 元素，你会看到我有 CSS 属性 - transition: all 0.5s;就可以了。

我也尝试将它添加到类 nav-up 和 nav-down 中，当您向上/向下滚动时，它们会被添加/删除，但同样的事情也会发生。我只是想让标题看起来像是上下滑动而不是消失。谢谢！

【问题讨论】：

寻求代码帮助的问题必须包括在问题本身中重现它所需的最短代码，最好是在堆栈片段中。尽管您提供了一个链接，但如果它变得无效，那么您的问题对于未来遇到同样问题的其他 SO 用户将毫无价值。见Something in my website/example doesn't work can I just paste a link。

标签： jquery css css-transitions transition

【解决方案1】：

您必须给它一个初始值，以便浏览器知道如何为top 属性设置动画。现在它从一个未定义的值变为-90px，并且浏览器不知道如何逐渐做到这一点（未定义它不是0px）。如果你有 top: 0px 表示显示状态，top: -90px 表示它动画的隐藏状态。

【讨论】：

【解决方案2】：

只需添加这个 top 0 和/或添加 transition: top .5s 到基本元素。你需要告诉浏览器定位从哪里开始。在你的情况下顶部：0px

header.site-header {
    background-color: #000 !important;
    box-shadow: none !important;
    padding: 18px 40px !important;
    position: fixed;
    z-index: 100;
    width: 100%;
    transition: top .5s;
    top: 0px;
}

您还可以更好地使用您的特定由 jquery 生成的类

header.site-header {
    background-color: #000 !important;
    box-shadow: none !important;
    padding: 18px 40px !important;
    position: fixed;
    z-index: 100;
    width: 100%;
}

.nav-down {
    top: 0px;
    transition: top .5s;
}

.nav-up {
    top: -90px;
}

【讨论】：