多个属性的CSS转换[重复]

Question

我有一个名为 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');
  }
} 

Answer 1

您已经正确地添加了一个过渡到将要从状态 x 到状态 y 的 html 元素。要使用多个 css 属性，请使用逗号，例如以下示例：

transition: width 2s, height 2s, background-color 2s, transform 2s;