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

Posted 2023-03-06

【中文标题】多个属性的CSS转换[重复]

【英文标题】：CSS transitions for multiple properties [duplicate]

【发布时间】：2020-11-01 12:35:08

【问题描述】：

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

【问题讨论】：

没有js，我们也是一头雾水。

用逗号分隔transition 属性。

@Dai transition: top, background-color 0.2s ease-in-out; 似乎不起作用

【参考方案1】：

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

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

【讨论】：

非常感谢 :)