javascript - 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>