同時在多個元素上使用CSS過渡

Question

出於某種原因，當嘗試同時對兩個元素進行動畫處理（基於最大高度）時，過渡總是一次發生，第一個過渡，當完成過渡時，另一個過渡開始過渡。 請參閱此示例，我已在js bin上構建了該現象。

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

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

http://jsbin.com/riperifoku/edit?html,js,output

我希望能幫助您減輕這個神秘感

Answer 1

我不確定我是否理解您的問題。 但是如果您想同時啟動兩個元素的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>

CSS

.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;
}

JS

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

Answer 2

嗨，你看起來像這樣嗎？ 據我了解，我認為這就是你想要的

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

  .box { background: red; height: 200px; width: 200px; margin: 15px; } .a { height: 500px; width: 500px; background: blue; } .b, .c { max-height: 0; overflow: hidden; transition: max-height 1s; transition-delay: 0; } 

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

這是此代碼的工作演示

DEMO