為什么我的過渡在引導導航上不起作用？

Question

為什么我的 class 切換是嚴格的，沒有任何過渡效果，即使我添加了過渡：0.5s？ 它在我的引導程序網站上不起作用。 每當我嘗試在 jsfiddle 站點上的自定義 div 上對其進行測試時，它都可以正常工作。 https://jsfiddle.net/dawid1798/5goyjwx0/3/

window.addEventListener('scroll', function() {
    var header = document.getElementById("navbar");
    header.classList.toggle("fixednav", window.scrollY > 100);
});

.fixednav {
    transition: 0.5s;
    position: fixed;
    top: 0;
    right: 0;
    left: 0;
    z-index: 9999;

}

Answer 1

當 nav 失去 class.fixednav 時，它也失去了轉換屬性。

把它放在.nav：

.nav {
  width: 100%;
  height: 250px;
  background: red;
  transition: 0.5s;
}

還要檢查引導程序是否已加載到項目中，並且您沒有使用 css 禁用轉換。