如何通过单击按钮来运行多个css转换？

我正在用html css js构建一个动画汉堡菜单。我现在知道如何使用javascript启动css转换。看见我现在的问题是，我需要通过单击按钮来运行多个转换。我把代码放在这里了

我的代码的简短解释。我制作了一个按钮（为了清晰起见，我将其设置为低透明度的绿色），当单击该按钮时，将显示背景.dsgn标题背景。现在我还想让菜单的两个矩形变成一个十字，并且.dsgn标题菜单打开的菜单项也会淡入

我的问题是，如何修改这个js代码，以便启动多个转换？因此，所有转换都是不同的元素。您可以在上面的JS文件中找到完整的代码（请随意编辑）

Javascript:

const background = document.querySelector('.dsgn-header-background');
const button = document.querySelector('.dsgn-header-button');

let open = false;

button.addEventListener('click', onClickPlay);

function onClickPlay(){
  if(background.classList.contains('on')){
    background.classList.remove('on');
  }else{
    background.classList.add('on');
  }
}

看看这个

function onClickPlay(){
  if(background.classList.contains('on')){
      background.classList.remove('on');
      element.classList.remove('anotherClassWithDifferentTransitions');
  }else{
      background.classList.add('on');
      element.classList.add('anotherClassWithDifferentTransitions');
  }
}

---

干杯

将其他元素添加到您的

onClickPlay

函数中，就像您在演示中所做的那样

const demo=document.querySelector（'.demo'）；
const demo2=document.querySelector（'.demo2'）；
const buttondemo=document.querySelector（'.buttondemo'）；
让开放=虚假；
buttondemo.addEventListener（'click'，onClickPlay）；
函数onClickPlay（）{
if（demo.classList.contains（'on'））{
demo.classList.remove（'on'）；
demo2.classList.remove（'on'）；
}否则{
demo.classList.add（'on'）；
demo2.classList.add（'on'）；
}
}

.demo{
宽度：0；
高度：100vh；
背景色：黑色；
位置：绝对位置；
右：0；
过渡：宽度4s；
}
.demo.on{
宽度：100vw；
}
D.演示2{
宽度：0；
高度：50vh；
背景色：红色；
位置：绝对位置；
右：0；
过渡：宽度8s；
}
.2.on{
宽度：100vw；
背景颜色：黄色；
}
buttondemo先生{
位置：绝对位置；
顶部：0px；
右：0px；
宽度：100px；
高度：100px；
背景颜色：绿色；
}

---

你可以试试这个，改变是我增加了2个常量变量，当菜单打开时在类中添加，当菜单关闭时在类中删除

  const background = document.querySelector('.dsgn-header-background');
 const button = document.querySelector('.dsgn-header-button');
const menu_up = document.querySelector('.dsgn-header-rectangle-up');
const menu_down = document.querySelector('.dsgn-header-rectangle-down');

let open = false;

button.addEventListener('click', onClickPlay);

function onClickPlay(){
  if(background.classList.contains('on')){
     background.classList.remove('on');
     menu_up.classList.remove('on');
     menu_down.classList.remove('on');
  }else{
    background.classList.add('on');
    menu_up.classList.add('on');
    menu_down.classList.add('on');

  }
}

希望这对你有帮助

const content = document.querySelector('.content');
const button = document.querySelector('.dsgn-header-button');

function onClickPlay() {content.classList.toggle('on');}

button.addEventListener('click', onClickPlay);

---

小提琴手：

嗨，谢谢你的快速回复！我的意思是，实际上用不同的元素开始转换。所以我不是说从同一个元素转换两个属性，而是转换四个、五个或六个元素，所有元素都有自己的转换。对不起，如果不清楚的话！嘿，签出我编辑的解决方案。这有什么意义吗？如果我想再添加几个元素，只需添加element.classList.remove（'anotherClassWithDifferentTransitions'）；在if和else？下，如下所示：函数onClickPlay（）{if（background.classList.contains（'on'））{background.classList.remove（'on'）；element.classList.remove（'anotherClassWithDifferentTransitions'）；elementtwo.classList.remove（'anotherClassWithDifferentTransitions'）；}else{background.classList.add（'on'））；element.classList.add（'anotherclasswithdifferentiatetransitions'）；elementtwo.classList.remove（'anotherclasswithdifferentiatetransitions'）；}}}是的，拉尔夫，就是这样！只有当您希望这些元素上的转换同时触发时，是的，您是对的！要为菜单中的交叉添加的类。dsgn-header-rectangle-down应为.dsgn-header-rectangle-down.on和.dsgn-header-rectangle-up应为.dsgn-header-rectangle-down.on。感谢您的帮助！这也是其他人的建议！我现在确实使用这个代码。谢谢你的帮助