Javascript CSS在多个元素上的同时转换

所以，我有3个相同尺寸的flexbox容器。当我点击其中一个按钮时，它应该会伸展到比其他按钮更大，如果我再次点击它，它就会恢复正常。 我已经用JS做了，而且很有效。 问题是，当我已经拉伸了一个长方体并尝试拉伸另一个长方体时，过渡持续时间会增加。我不知道为什么。我以为不同的转变会同时开始

代码如下：

/* HTML */

<div class="flexbox">
            <div class="box-1" onclick="box1();">
                <h3>Box 1</h3>
                <p>Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore</p>
            </div>
            <div class="box-2" onclick="box2();">
                <h3>Box 2</h3>
                <p>Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore</p>
            </div>
            <div class="box-3" onclick="box3();">
                <h3>Box 3</h3>
                <p>Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore</p>
            </div>
        </div>

---

如何使转换持续时间始终保持不变（本例中为1s）？

可以对您的代码进行许多改进，以减少重复，避免与

getElementsByClassName

返回的live交互的复杂性，允许您避免使用内联

onclick

assignments，并将导致转换只需1秒

下面的示例实现了单个

grow（）

函数，该函数由连接到每个框的侦听器调用。通过使用

.querySelectorAll（'.box'）

查询DOM并对每个元素调用

addEventListener（）

返回，通过迭代返回的来添加侦听器

在CSS中，我们为我们希望框能够拥有的每个状态声明类——在本例中为

flex-grow:0

和

flex-grow:4

。然后，在我们的

grow（）

函数中，我们只需根据单击的框根据需要添加或删除这些样式

函数增长（e）{
//如果单击的框已具有类“flexgrow4”，则返回
if（e.currentTarget.classList.contains（'flexgrow4'））返回；
//否则，请在flexbox容器中查找具有
//类“flexgrow4”并将其替换为“flexgrow0”
const lastActive=flexbox.querySelector（'.flexgrow4'）；
if（lastActive）lastActive.classList.replace（'flexgrow4'，'flexgrow0'）；
//最后，在单击的框中将“flexgrow0”替换为“flexgrow4”
e、 currentTarget.classList.replace（'flexgrow0'，'flexgrow4'）；
}
const flexbox=document.querySelector（'.flexbox'）；
const-box=document.queryselectoral（“.box”）
forEach（box=>box.addEventListener（“单击”，增长，错误））
.flexbox{
显示器：flex；
宽度：100vw；
证明内容：中心；
}
.flexbox分区{
边框：1px#ccc实心；
边界半径：10px；
宽度：100px；
高度：250px；
填充：10px；
利润率：2x10px；
过渡：所有1线性0；
}
.flexgrow0{
柔性生长：1；
}
.4{
弹性生长：4；
背景色：番茄；
}

方框1
在工作和工作时间内，所有人都必须遵守法律

方框2
在工作和工作时间内，所有人都必须遵守法律

方框3
在工作和工作时间内，所有人都必须遵守法律

FYI当您似乎要复制和粘贴代码并更改一些东西时，这通常是一个提示，提示您应该尝试找到一种方法来创建函数，以便可以重用iThanks，这非常有用。我才刚开始，所以我对这种语言不太熟悉。好吧，我试过你的代码，但有两件事我不明白。首先，用于添加eventListeners的代码在哪里运行？因为我已经把它放在我的JS文件中了，但是我不能自动工作。我怎样才能让它工作？第二，我认为当我“打开”第一个盒子时，与我已经“打开”一个盒子时相比，过渡的持续时间是不同的。@AndreaMontanari我已经研究了你提到的时间问题，在第一个盒子打开时确实更快。这里有一个相关的问题：它讨论了过渡flex grow的一些变幻莫测之处，但给出的解决方案并不能直接解决您的问题。当子对象填满父对象的宽度时，计时似乎就正确了，因此您可以使用
flex-grow:1
-snippet-edited来代替使用
flex-grow:0
作为基本状态。至于添加事件侦听器，您可以在DOM完成加载后在全局范围内运行它，或者将其包装在函数中并显式调用，但也要确保向每个子di添加
框
类和相关的起始类
/* CSS */

.flexbox {
    display: flex;
    width: auto;
    justify-content: center;
}

.flexbox div {
    border: 1px #ccc solid;
    border-radius: 10px;
    width: 250px;
    height: 250px;
    padding: 10px;
    margin: 2px 10px;
    transition: flex-grow 1s linear 0s;
}

.box-1{
  flex-grow: 0;
}

.box-2 {
  flex-grow: 0;
}

.box-3 {
  flex-grow: 0;
}

/* JS */

function box1(){
  const box1 = document.getElementsByClassName('box-1')[0];
  if(box1.style.flexGrow != '4'){
      box1.style.flexGrow = '4';
  } else {
    box1.style.flexGrow = '0';
  }

  const box2 = document.getElementsByClassName('box-2')[0];
  box2.style.flexGrow = '0';

  const box3 = document.getElementsByClassName('box-3')[0];
  box3.style.flexGrow = '0';
}

function box2(){
  const box2 = document.getElementsByClassName('box-2')[0];
  if(box2.style.flexGrow != '4'){
      box2.style.flexGrow = '4';
  } else {
    box2.style.flexGrow = '0';
  }

  const box1 = document.getElementsByClassName('box-1')[0];
  box1.style.flexGrow = '0';

  const box3 = document.getElementsByClassName('box-3')[0];
  box3.style.flexGrow = '0';
}

function box3(){
  const box3 = document.getElementsByClassName('box-3')[0];
  if(box3.style.flexGrow != '4'){
      box3.style.flexGrow = '4';
  } else {
    box3.style.flexGrow = '0';
  }

  const box1 = document.getElementsByClassName('box-1')[0];
  box1.style.flexGrow = '0';

  const box2 = document.getElementsByClassName('box-2')[0];
  box2.style.flexGrow = '0';
}