队列宽度和高度在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>