我希望能够对 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>
所需顺序:
- 点击
- 宽度在 0.5 秒内增加
- 同时等待0.5秒
- 高度在 0.5 秒内增加
现在,这一切都在 jFiddle 中同时发生。在我的本地机器上,它忽略了高度过渡(它只是拍摄到 300px
而不是缓动,然后缓和宽度过渡)。
有什么想法吗?
最佳答案
如果我没理解错的话,
第一个持续时间值会影响第一个持续时间等。因此您需要将 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>
关于javascript - css3中的队列宽度和高度转换,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/35414163/