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
}

你不能过渡，这会影响你的效果