缓和的过渡似乎不适用于拖延
缓和的过渡似乎不适用于拖延
提问于 2014-01-29 12:32:27
我有一个固定高度和宽度的div，在单击标签(复选框技巧)时，我将div扩展到100%的宽度和高度。然而，这是可行的，但问题正在转变。
我希望创造一个宽松的过渡，首先宽度扩大，然后高度扩大。然而，在定义了过渡之后，放松就不会发生了，相反，它就像转换时间函数转到了step-end。这种转变是在没有放松的情况下立即发生的(尽管高度转换的延迟是可行的)。
tl;dr:过渡失去平滑性
示例：jsFiddle
回答 2
Stack Overflow用户
回答已采纳
发布于 2014-01-29 18:45:55
这些属性不能从不同的“度量”中转换。
在基状态中，在px中指定高度；在更改状态中，以百分比指定高度。那不管用。
你可以用一些不完全令人满意的技巧来设置它，其中最好的方法是使用最大高度来进行更改。
#cbox {
display:none;
}
.someDiv {
background: blue;
color: white;
width: 200px;
max-height: 100px;
overflow: hidden;
height: 100%;
transition-property: width, max-height;
transition-duration: 2000ms;
transition-timing-function: ease;
transition-delay: 0, 2000ms;
}
#cbox:checked + div {
width: 100%;
max-height: 1000px;
}我还编写了转换，这样可以在使用多个属性时为您节省一些输入；请注意，我只可以只编写一次。
小提琴
Stack Overflow用户
发布于 2014-01-29 14:51:38
您应该用逗号分隔属性，而不是将它们写在同一行中，尝试如下
CSS
-webkit-transition: width 200ms ease 0s, height 200ms ease 200ms;
-moz-transition: width 200ms ease 0s, height 200ms ease 200ms;
-ms-transition: width 200ms ease 0s, height 200ms ease 200ms;
-o-transition: width 200ms ease 0s, height 200ms ease 200ms;
transition: width 200ms ease 0s, height 200ms ease 200ms;页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/21431240
复制相关文章
相似问题
腾讯云开发者
