CSS转换不适用于百分比高度？

Question

我有以下CSS定义:

.detailsCollapsed
{
   display:none;
   height:0%;
   width:100%;
   -webkit-transition:height 40s ease-in-out;
}

.detailsExpanded
{
    display:block;
    visibility:visible;
    height:100%;
    width:100%;
    -webkit-transition:height 40s ease-in-out;
}

这些应用于包含其中一些内容的div.

我也有一些javascript,当单击div时,它会更改元素上的类名.这适用于扩展和折叠,但iPhone上没有动画？(我试过的所有其他过渡都适用于流畅的动画)任何想法？

Answer 1

到目前为止(纯CSS)解决方案

如果您离开height:auto;并使用固定值,max-height您可以模拟转换:

.details-expanded {
    max-height: 300px; /* try to guess a max-height for your content */
}

.details-collapsed {
    height: auto;
    max-height: 0;
    transition: max-height 500ms linear; /* pick a proportional duration */
}

注意转换持续时间以及max-height元素扩展的时间.玩这些值,直到你得到想要的行为.

这样,您可以在两个定义的值之间进行转换(在上面的示例中,从0到300),而height属性将"跟随" max-height转换并增长直到获得内容的大小.

演示

演示1 - 此解决方案的一个工作示例

演示2 - 只是演示了DEMO 1中发生的事情

意见

目前,转换仅在预定义值之间实现,我认为这是因为在某些情况下引擎无法猜测初始值或最终值.如果你有一个高度转换,它的最终值是50%但转换本身会影响父母的身高怎么办？可能需要对每个帧进行多次回流计算,从而导致性能问题.

就像fabb所说的那样,CSS转换的规范决定了应该支持百分比值,因此引擎决定使用动态值点支持转换的情况可能只是时间问题.尽管如此,我不确定什么可以被认为是auto值得思考的正确行为.

Answer 2

根据关于CSS3过渡的W3C规范,应该允许长度和百分比进行属性高度的过渡.所以我想在浏览器中支持提供百分比只是时间问题.

Answer 3

正是从 display:none 到 display:block 的更改停止了转换。尝试将折叠样式设置为 display:block; 高度：0；溢出：隐藏；

注意：auto 的扩展高度也会停止转换。如果包含块上没有设置高度，则 100% 的高度等于 auto 的高度。