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
}

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