隊列寬度和高度在css3中轉換

Question

我希望能夠排隊CSS3寬度和高度過渡。 當我單擊一個div時，它的類被jquery切換為active ，但我似乎無法首先更改div的寬度，然后更改高度。

 $(document).ready(function() { $("#resize").click(function() { $("#resize").toggleClass("active"); }); }); 

 #resize.active { width: 100%; height: 300px; -webkit-transition-property: height, width; -webkit-transition-duration: 0.5s, 0.5s; -webkit-transition-delay: 0.5s, 0.5s; transition-property: height, width; transition-duration: 0.5s, 0.5s; transition-delay: 0.5s, 0.5s; } #resize { background-color: blue; height: 45px; width: 100px; -webkit-transition-property: width, height; -webkit-transition-duration: 0.5s, 0.5s; -webkit-transition-delay: 0.5s, 0.5s; transition-property: width, height; transition-duration: 0.5s, 0.5s; transition-delay: 0, 0.5s; } 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <div id="resize"> <h1> Stuff </h1> </div> 

jFiddle

所需的順序：

1. 點擊
2. 寬度增加0.5秒
3. 同時等待0.5秒
4. 高度增加0.5秒

現在，這一切都發生在jFiddle的同一時間。 在我的本地機器上它忽略了高度轉換（它只是300px而不是緩和，然后緩和寬度轉換）。

有任何想法嗎？

Answer 1

如果我理解正確，

第一個持續時間值會影響第一個持續時間等。因此，您需要將transition-duration更改為1s, 0.5s而不是0.5s, 0.5s 。

像這樣：

 $(document).ready(function() { $("#resize").click(function() { $("#resize").toggleClass("active"); }); }); 

 #resize.active { width: 100%; height: 300px; -webkit-transition-property: height, width; -webkit-transition-duration: 1s, 0.5s; -webkit-transition-delay: 1s, 0.5s; transition-property: height, width; transition-duration: 1s, 0.5s; transition-delay: 1s, 0.5s; } #resize { background-color: blue; height: 45px; width: 100px; -webkit-transition-property: width, height; -webkit-transition-duration: 0.5s, 1s; -webkit-transition-delay: 0.5s, 1s; transition-property: width, height; transition-duration: 0.5s, 1s; transition-delay: 0, 1s; } 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <div id="resize"> <h1> Stuff </h1> </div>