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