如何通过单击按钮运行多个 css 过渡

Question

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

对我的代码的简短解释。我做了一个按钮(为了清楚起见，我把它变成了绿色，不透明度很低(，当单击该按钮时，背景.dsgn-header-background将出现。现在，我还希望菜单的两个矩形动画化为十字形，并且 .dsgn-header-menu-open-menuitems 也淡入。

我的问题是，如何修改此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');
  }
}

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

干杯！

Answer 2

你可以

试试这个，变化是我又添加了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');
  }
}

希望这对您有所帮助.

Answer 3

const content = document.querySelector('.content');
const button = document.querySelector('.dsgn-header-button');
function onClickPlay() {content.classList.toggle('on');}
button.addEventListener('click', onClickPlay);

小提琴：https://jsfiddle.net/s24mbakf/

Answer 4

将其他元素添加到您的onClickPlay函数中，就像您在演示中所做的那样。

const demo = document.querySelector('.demo');
const demo2 = document.querySelector('.demo2');
const buttondemo = document.querySelector('.buttondemo');
let open = false;
buttondemo.addEventListener('click', onClickPlay);
function onClickPlay(){
	if(demo.classList.contains('on')){
            demo.classList.remove('on');
            demo2.classList.remove('on');
	} else {
            demo.classList.add('on');
            demo2.classList.add('on');
	}
}

.demo {
  width: 0;
  height: 100vh;
  background-color: black;
  position: absolute;
  right: 0;
  transition: width 4s;
}
.demo.on {
  width: 100vw;
}
.demo2 {
  width: 0;
  height: 50vh;
  background-color: red;
  position: absolute;
  right: 0;
  transition: width 8s;
}
.demo2.on {
  width: 100vw;
  background-color: yellow;
}
.buttondemo {
  position: absolute;
  top: 0px;
  right: 0px;
  width: 100px;
  height: 100px;
  background-color: green;
}

<div class="demo"><div>
<div class="demo2"><div>
<div class="buttondemo"><div>