CSS转换不适用于百分比高度？
我有以下的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上的animation？ （我尝试使用stream体animation正常工作的所有其他转换）任何想法？
到目前为止（纯CSS）的解决scheme
如果你离开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转换并增长，直到获得内容的大小。
演示
DEMO 1 – 这个解决scheme的一个实例
DEMO 2 – 只是演示DEMO 1中正在发生的事情
意见
现在转换只能在预定义的值之间实现，我猜这是因为引擎在某些情况下不能猜测初始值或最终值。 如果你有一个高度过渡，其最终值是50％，但过渡本身以某种方式影响父母的身高？ 这可能需要在每个帧上进行几次回stream计算，从而导致性能问题。
就像fabb所说的那样 ，CSS转换规范决定了应该支持百分比值，所以在引擎决定使用dynamic赋值点支持转换的情况下，这可能只是一个时间问题。 不过，我不确定什么可以被认为是auto价值思想的正确行为。
根据W3C CSS3转换规范 ， 长度和百分比应该允许在属性高度上进行转换。 所以我想这只是一个时间问题，直到浏览器支持提供一个百分比。
我遇到过同样的问题。 当“折叠”时，转换工作正常，但在“展示：无”之前设置为“展开”时没有转换（如“打开”）。
我在debugging的时候不小心find了一个工作的解决scheme：只是简单地查询“offsetHeight”似乎强制元素的内部重新渲染。
像这样的东西：
showElement = function(){ ... oEl.style.display = "block"; var xDump = oEl.offsetHeight; oEl.className = "show"; }
xDump从来没有被使用过，但拥有它，造成了不同。
我已经使用了以下解决scheme，用于需要在显示无和块之间切换的元素，并保持过渡效果：
function slidedown(element) { ... element.style.display = "block"; var timerId = setTimeout(function(){ element.style.webkitTransitionProperty = "height"; element.style.webkitTransitionTiming = "linear"; element.style.webkitTransitionDuration = "3.5s"; element.style.height = "500px"; }, 0); ... }
setTimeout函数将强制一个短暂的延迟，允许在切换显示属性之后进行转换。 希望能帮助到你。
这是从显示的变化：没有显示：阻止过渡的块。 尝试将折叠样式设置为显示：block; 高度：0; 溢出：隐藏;
注意：自动展开高度也会停止转换。 如果在容纳块上没有设置高度，则100％的高度等于自动的高度。
希望你已经解决了这个问题，但是我只是写信说我遇到了同样的问题：至less在iOS 4.1上，WebKit不会animation一个转换，如果它定义在一个样式为“display：none ;“就像尼古拉斯上面提到的一样。
如果你不关心渲染这个元素的性能，就像我的情况一样，那么我提出另一个解决scheme，而不是将高度设置为0.在你的body的onLoad事件callback中，将元素保存在一个variables中，并从DOM中移除它。 然后重新插入它来显示它。
对于那些想要使用百分比的人来说，这是一个解决scheme。
诀窍是将它包含在具有设置高度和宽度的div中。 如果你是浮动的容器div这可能不是理想的，但如果你是绝对定位容器这应该工作得很好，只要元素不相互重叠。
这里是代码
.container { width: 500px; height: 500px; background: transparent; } .expand-content{ height: 0%; color: #fff; background: green; } .expand-content:hover { height: 100%; background: orange; transition: all 2s ease; } .expand-content p { font-size: 35px; text-align: center; }
<div class="container"> <div class="expand-content"> <p>Expanded Content</p> </div> </div>
