多个属性的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

您已经正确地添加了一个过渡到 html 元素，该元素将从状态 x 到状态 y “过渡”。要使用多个 css 属性，请使用逗号，例如以下示例：transition: width 2s, height 2s, background-color 2s, transform 2s;