Javascript CSS动画被阻止

目前我正忙着让我的导航栏动画正常工作。但它就是做不到

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

问题是： 当我将所有数据放入JSFIDLE时，它就工作了导航栏已设置动画

但是在我的直播页面上（1:1相同的代码），它不起作用。

---

有什么想法吗？

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

.headroom--unpinned {
  display: none
}

---

无论您不转换还是不能转换，都会影响您的效果

请具体说明@PrateekAgrawal轻松过渡在小提琴上对他/她有效，但在实际的现场上不起作用我怎么能说得更具体？代码在JSFIDLE中工作，但不在我自己的页面上。这是

。净空--unpinned{display:none}

您不能转换显示modes@Thomas对你说得对，现在它修好了：）非常感谢你。如果你添加你的评论作为答案，我可以选择它！