javascript - CSS 动画被阻止

Question

目前我正忙于让我的导航栏动画正常工作。但它不会这样做。

.headroom {
transition: transform .25s ease-in-out;
will-change: transform;
}
.headroom--pinned {
transform: translateY(0%);
}
.headroom--unpinned {
transform: translateY(-100%);
}

问题:当我将所有数据放入 jsfiddle 时，它​​起作用了! - https://jsfiddle.net/go8442kr/导航栏是动画的

但在我的实时页面(1:1 相同代码)上它不起作用。 http://1lvlup.com/test2/

对此有什么想法吗？

Answer 1

除了显示的样式，页面上的CSS还包含

.headroom--unpinned {
  display: none
}

如果你没有也不能过渡，那会干扰你的效果