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

Question

我正在用 html css js 构建一个动画汉堡菜单。我现在知道如何使用 javascript 开始 css 转换。参见 https://jsfiddle.net/ralphsmit/byaLfox5/ .我现在的问题是我需要通过单击按钮来运行多个转换。我把我的代码放在这里 https://jsfiddle.net/ralphsmit/v980ouwj/16/ .

我的代码的简短说明。我制作了一个按钮(为了清晰起见，我将其设为绿色且不透明度较低)，单击该按钮时，背景 .dsgn-header-background 将出现。现在我还希望菜单的两个矩形动画成十字形，并且 .dsgn-header-menu-opened-menuitems 也淡入。

我的问题是，如何修改这段js代码，以便启动多个转换？所以所有的过渡都是不同的元素。您将在上面的 JS fiddle 中找到完整的代码(请随意编辑)。

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');
  }
}

Answer 1

检查一下。

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

干杯!