我有以下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上没有动画？ （我试过的所有其他过渡都适用于流畅的动画）任何想法？
答案 0 :(得分：63)
如果您离开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 - 此解决方案的一个工作示例
DEMO 2 - 只是演示了DEMO 1中发生的事情
现在转换仅在预定义值之间实现，我认为这是因为在某些情况下引擎无法猜测初始值或最终值。如果你有一个高度转换，它的最终值是50％但转换本身会影响父母的身高怎么办？可能需要对每个帧进行多次reflow计算，从而导致性能问题。
Like fabb said，CSS转换的规范确定应该支持百分比值，因此引擎决定使用动态值点支持转换的情况可能只是时间问题。尽管如此，我不确定可以认为auto值被认为是正确的行为。
答案 1 :(得分：16)
根据W3C Spec on CSS3 Transitions， length 和百分比都应该允许在属性 height 上进行转换。所以我想在浏览器中支持提供百分比只是时间问题。
答案 2 :(得分：3)
我在调试时意外地找到了一个有效的解决方案：只是查询“offsetHeight”似乎强制内部重新渲染元素。
类似的东西：
showElement = function(){
...
oEl.style.display = "block";
var xDump = oEl.offsetHeight;
oEl.className = "show";
}
xDump永远不会被使用，但拥有它，会产生不同。
答案 3 :(得分：2)
我已经将以下解决方案用于需要在display none和block之间切换的元素，并保持过渡效果：
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);
...
}
答案 4 :(得分：1)
从display：none到display的变化：阻止转换的块。尝试设置折叠样式以显示：block;高度：0;溢出：隐藏;
注意：auto的扩展高度也会停止转换。如果包含块上没有设置高度，则100％的高度等于auto的高度。
答案 5 :(得分：0)
希望你已经解决了这个问题，但我只是写信说我遇到了同样的问题：WebKit，至少在iOS 4.1上，如果它是在一个样式上定义的元素上定义的，它将不会为转换设置动画。 display：none;“，就像尼古拉斯上面提到的那样。
如果你不关心渲染这个元素就像性能一样，那么我提出另一个解决方案，而不是将高度设置为0.在你的body的onLoad事件回调中，将元素保存在变量中并从DOM中删除它。然后在显示它时重新插入它。
答案 6 :(得分：0)
这是一个针对那些想要使用百分比的人的解决方案。
诀窍是将它包含在具有设定高度和宽度的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>JSFiddle上的
答案 7 :(得分：0)
如果不知道总高度，这是我的解决方法
.container{
overflow:hidden;
max-height:20px;
transition-property: max-height;
-webkit-transition-property: max-height;
transition-delay: 1s; /*Set a delay for this css-propery so content also slides up*/
-webkit-transition-delay: 1s;
}
.container .content{
z-index:5;
background-color:LightGray;
margin-top:20px;
transform:translateY(-100%);
-webkit-transform:translateY(-100%);
transition:transform 1s;
-webkit-transition:transform 1s;
}
.container:hover{
max-height:9999px; /*apparently "none" doesnt work*/
transition-delay: 0s;
-webkit-transition-delay: 0s;
}
.container:hover .content{
transform:translateY(0);
-webkit-transform:translateY(0);
}
/*Less interesting stuff below*/
body{
background-color:navy;
}
div,label{
margin:0;
padding:0;
}
.container label{ /*Just a label to describe what you can do here*/
height:20px;
line-height:20px;
display:block;
z-index:10;
position:absolute;
background-color:maroon;
width:100%;
}<body>
<div class="container">
<label>
Hover container
</label>
<div class="content">
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras venenatis congue lectus pharetra interdum. Cras sit amet interdum ipsum, vel commodo ante. Maecenas quis libero eu tortor suscipit rutrum. Cras quam eros, malesuada ac semper sed, viverra condimentum nisl. Quisque lobortis porta purus non fringilla. Fusce erat eros, aliquam a diam quis, ullamcorper laoreet odio. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vestibulum pharetra scelerisque felis, vitae finibus dui lobortis non. Mauris iaculis rutrum vehicula. Nullam porta arcu et diam porta, in tristique nisl ornare. Mauris id ex maximus, lobortis erat a, laoreet justo.
Nullam tempus neque enim, nec consectetur enim fringilla ac. Orci varius natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Proin non rutrum nisl, sed vestibulum augue. Sed ac magna et metus tempus bibendum elementum id libero. Sed semper imperdiet risus et pellentesque. Aliquam commodo magna at rhoncus pellentesque. Vivamus tempus tellus lorem, a volutpat est pharetra nec. Vestibulum velit ligula, aliquet sit amet bibendum eget, viverra scelerisque tellus. Cras aliquam hendrerit bibendum. Etiam non faucibus nisi, sit amet cursus neque. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Orci varius natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus.
Maecenas in eros ac elit pretium molestie. Mauris quis dolor erat. Suspendisse scelerisque gravida libero, rutrum consectetur metus ultrices in. Fusce eleifend, orci vitae sodales dictum, lectus nunc volutpat nulla, in efficitur dolor augue sed lorem. Nam ac lectus ultrices, ornare magna non, auctor neque. Mauris eros eros, bibendum commodo dolor non, posuere ultrices leo. Nullam ut laoreet ligula. Nulla posuere risus nec nibh fermentum, pretium consequat tellus eleifend. Vestibulum volutpat nisl quis euismod pulvinar. Donec hendrerit augue sed dui volutpat ultrices. Pellentesque mollis scelerisque metus, vulputate viverra risus pellentesque et. Duis nisi ante, faucibus in nunc et, semper varius turpis. Vivamus pharetra volutpat convallis.
Curabitur quis urna in orci tincidunt cursus vel ac dolor. Integer turpis augue, maximus eu lectus a, euismod consequat risus. Fusce leo lacus, dignissim vel sapien at, venenatis porttitor dui. Donec in metus non ex facilisis venenatis. In ac urna non tellus lobortis fringilla. Maecenas ornare dui nisl, gravida ornare purus aliquam in. Cras nec tortor eget neque volutpat pulvinar. In vestibulum, ante ut pharetra semper, nulla libero tincidunt nunc, a convallis orci dolor vel metus. Vivamus enim est, volutpat sit amet sagittis ut, efficitur at lacus. Morbi laoreet erat sit amet finibus finibus. Nulla sodales ut est non commodo. Aliquam sed purus a magna vehicula ullamcorper et id nunc. Curabitur aliquet tempor odio, euismod tempor ante consectetur ut. Proin neque sem, imperdiet sed est quis, ultricies tincidunt sem.
Donec nec sem id eros congue convallis eu in nibh. Etiam viverra sollicitudin maximus. In hac habitasse platea dictumst. Ut quis porta turpis. Duis egestas quam diam, id bibendum dolor imperdiet quis. Praesent ac odio in neque ultrices commodo. Nullam ac lacus sit amet dolor rhoncus tincidunt.
</div>
</div>
</body>
答案 8 :(得分：0)
此问题没有绝对的解决方案，可以通过各种解决方法来获得所需的结果。浏览器当前不支持此功能，因为这涉及到将元素转换为自动高度，为此浏览器将不得不对该动画的每个阶段执行重排，这在性能方面并不简单且昂贵。
解决方案1：最大高度（理想解决方案）
.slideup, .slidedown {
height: auto;
max-height: 0px;
overflow-y: hidden;
transition: max-height 300ms ease-in-out;
}
.slidedown {
max-height: 500px;
}
解决方案2：转换：scaleY（）
.slideup .slidedown {
overflow:hidden;
transition:transform 0.3s ease-out;
transform, not height!
height:auto;
transform:scaleY(1);
}
.slideup {
transform:scaleY(0); //collapse the view
}