我有以下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上？ (所有其他转换我试图用流体动画精细工作)任何想法？
解决方法
到目前为止，(纯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 */
}
当元素展开时，请注意过渡持续时间和最大高度。使用值直到你得到想要的行为。
这样，您可以在两个定义的值(在上面的示例中，从0到300)之间转换，而height属性将“跟随”max-height转换并增长，直到它获得内容的大小。
演示
DEMO 2 – 只是示范演示1中发生了什么
观察
现在转换仅在预定义的值之间实现，我认为这是因为引擎在某些情况下不能猜测初始值或最终值。如果你有一个高度过渡，其最终值是50％，但过渡本身影响父的高度不知何故？它可能需要在每个帧的几个reflow计算导致性能问题。
Like fabb said，CSS转换的规范确定应该支持百分比值，所以它可能只是一个时间问题，直到引擎决定在哪些情况下他们将支持使用动态赋值点的转换。不过，我不知道什么可以被认为是汽车价值观的正确行为。
