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

Question

我正在使用 html css js 构建动画汉堡菜单。我现在知道如何使用 javascript 开始 css 转换。参见 https://jsfiddle.net/ralphsmit/byaLfox5/. My problem now is that I need to run more than one transition with a click on my button. I've put my code here 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');
  }
}

干杯！

Answer 2

将其他元素添加到您的 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>

Answer 3

你可以试试这个，变化是我添加了 2 个常量变量，当菜单打开时在 class 上添加，当菜单关闭时在 class 上删除。

  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 4

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

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

button.addEventListener('click', onClickPlay);

fiddle: https://jsfiddle.net/s24mbakf/

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

How to run more than one css transition with a click on a button?

css

transition

css-transitions

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

How to run more than one css transition with a click on a button?

css

transition

css-transitions

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