Javascript 同时在多个元素上使用css转换

出于某种原因，当尝试同时设置两个元素的动画（基于最大高度）时，变换总是一次发生一个，第一个元素完成变换后，另一个元素开始变换。 请看这个例子，我已经在js-bin的基础上看到了这个现象

setTimeout(function () {
    $(".b").css("max-height", "500px");
}, 500);

setTimeout(function () {
    $(".b").css("max-height", "0");
    $(".c").css("max-height", "500px");
}, 2000);

---

如果能帮我解开这个谜团，我将不胜感激。我不知道我是否理解你的问题。但是，如果您想同时启动两个元素的css转换，请参见

基本上，您不应该放置两个setTimeout函数。两个CSS转换都应该在单个setTimeout函数中完成，如下所示

setTimeout(function () {
    $(".b").css("max-height", "500px");
    $(".c").css("max-height", "500px");
}, 1000);

更新的答案

HTML

<div class="a">
    <div class="b">
        <div class="box"></div>
    </div>
    <div class="c">
        <div class="box"></div>
    </div>
</div>

JS

.a {
    height:500px;
    width:500px;
    background:blue;
}
.b .box {
    background: red;
    height: 200px;
    width: 200px;
    margin: 15px;
    transition: height 2s ease;
}
.c .box{
     background: red;
    height: 10px;
    width: 200px;
    margin: 15px;
    transition: height 2s ease;
}

setTimeout(function () {
  $(".b .box").css("height", "10");
  $(".c .box").css("height", "200px");
}, 1000);


setTimeout(function () {
  $(".b .box").css("height", "200");
  $(".c .box").css("height", "10px");
}, 4000);

---

我不知道我是否理解你的问题。但是，如果您想同时启动两个元素的css转换，请参见

基本上，您不应该放置两个setTimeout函数。两个CSS转换都应该在单个setTimeout函数中完成，如下所示

setTimeout(function () {
    $(".b").css("max-height", "500px");
    $(".c").css("max-height", "500px");
}, 1000);

更新的答案

HTML

<div class="a">
    <div class="b">
        <div class="box"></div>
    </div>
    <div class="c">
        <div class="box"></div>
    </div>
</div>

JS

.a {
    height:500px;
    width:500px;
    background:blue;
}
.b .box {
    background: red;
    height: 200px;
    width: 200px;
    margin: 15px;
    transition: height 2s ease;
}
.c .box{
     background: red;
    height: 10px;
    width: 200px;
    margin: 15px;
    transition: height 2s ease;
}

setTimeout(function () {
  $(".b .box").css("height", "10");
  $(".c .box").css("height", "200px");
}, 1000);


setTimeout(function () {
  $(".b .box").css("height", "200");
  $(".c .box").css("height", "10px");
}, 4000);

---

嗨，你看起来像这样吗。。？？ 据我所知，我想这就是你想要的

setTimeout（函数（）{
$（“.b”）.css（“最大高度”，“500px”）；
$（“.c”）.css（“最大高度”，“500px”）；
}, 500);
setTimeout（函数（）{
$（“.b”）.css（“最大高度”，“0”）；
}, 2000);
.box{背景：红色；高度：200px；宽度：200px；边距：15px；}
.a{高度：500px；宽度：500px；背景：蓝色；}
.b、.c{最大高度：0；溢出：隐藏；转换：最大高度1s；转换延迟：0；}
嗨，你看起来像这样吗。。？？
据我所知，我想这就是你想要的


setTimeout（函数（）{
$（“.b”）.css（“最大高度”，“500px”）；
$（“.c”）.css（“最大高度”，“500px”）；
}, 500);
setTimeout（函数（）{
$（“.b”）.css（“最大高度”，“0”）；
}, 2000);
.box{背景：红色；高度：200px；宽度：200px；边距：15px；}
.a{高度：500px；宽度：500px；背景：蓝色；}
.b、.c{最大高度：0；溢出：隐藏；转换：最大高度1s；转换延迟：0；}

无法理解为什么这样做，我可能忽略了它。然而，我确实实现了一个不太好的解决方案，只在
.c
转换上设置了
500ms
超时：
setTimeout（function（）{$（.c”）.css（“max height”，“500px”）；}，500）
@rotman您的实际期望输出是什么。？是否有任何限制您不能使用CSS关键帧动画？除非您向我们展示如何定义过渡（持续时间等），否则我们不能说。无法理解为什么这样做，我可能忽略了它。然而，我确实实现了一个不太好的解决方案，只在
.c
转换上设置了
500ms
超时：
setTimeout（function（）{$（.c”）.css（“max height”，“500px”）；}，500）
@rotman您的实际期望值是多少？是否有任何限制，您不能使用CSS关键帧动画？除非您向我们展示如何定义过渡（持续时间等）。嗨，Nilesh，我希望看到分区b缩小到0px，而分区c将扩大到500px，问题是，这两个转变一个接一个地发生，而不是像我希望的那样同时发生。我希望b部门同时收缩，c部门同时支出。第一次出发只是为了以一种更明显的方式展示变化。感谢Nilesh，我希望看到div b缩小到0px，而c div将扩展到500px，问题是这两个转变一个接一个地发生，而不是像我希望的那样同时发生。我希望b部门同时收缩，c部门同时支出。第一次出发只是为了以一种更明显的方式展示变化。thanksimagine 2 div's，一个高度为5px，两个高度为50px，我希望div 1的高度转换为50px，div 2的高度降低为5px，我希望两个div同时转换…想象2个div's，一个高度为5px，两个高度为50px，我希望一号舱的高度转换为50px，二号舱的高度转换为5px，我希望两个舱同时转换。。。