Javascript 多属性的CSS转换

我有一个名为nav-up的类，当我滚动以使其消失时，我会使用javascript将它应用到我的导航栏。我还有一个名为nav dark的类，使其具有背景色

我想有一个平稳的过渡对这两个变化，但似乎我只能做一个在同一时间，如果我做两个它抵消了其他

.navbar {
  transition: top 0.2s ease-in-out;
  transition: background-color 0.2s ease-in-out;
}

.nav-up {
  top: -80px;
}

.nav-dark {
  background-color: rgba(43, 43, 43, 1);
  -webkit-box-shadow: 0 5px 14px rgba(0, 0, 0, 0.7);
  box-shadow: 0 5px 14px rgba(0, 0, 0, 0.7);
}

.nav-transparent {
  opacity: 0;
}

下面是javascript。它适用于应用类，但如果我向上滚动，我希望它再次是透明的

window.onscroll = function() {scrollFunction()};

document.querySelector(".navbar").classList.add('navbar-transparent')
document.querySelector(".navbar").classList.remove('navbar-dark');

function scrollFunction() {
  if (document.body.scrollTop < 330 || document.documentElement.scrollTop < 330) {
    document.querySelector(".navbar").classList.add('nav-dark');
  } else if (document.body.scrollTop > 330 || document.documentElement.scrollTop > 330){
    document.querySelector(".navbar").classList.add('navbar-transparent')
    document.querySelector(".navbar").classList.remove('navbar-dark');
  }
} 

---

您已经正确地向html元素添加了一个转换，该元素将从状态x转换为状态y。要使用多个css属性，请使用逗号，如以下示例所示：

---

过渡：宽度2s，高度2s，背景色2s，变换2s

没有js，我们也处于黑暗中。用逗号分隔过渡属性。@Dai过渡：顶部，背景色0.2s易于输入输出；似乎并不完美谢谢你：