CSS CSS过渡不适用于百分比高度？

CSS transition not working for percentage height?

提问by Patrick

I have the following CSS definitions:

我有以下 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;
}

These are applied to a div with some content inside of it.

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

I also have some javascript that when a div is clicked it changes the class name on the element. This works fine for expanding and collapsing but there is no animation on the iphone? (All other transitions I tried work fine with fluid animation) Any ideas?

我还有一些 javascript，当单击 div 时，它会更改元素上的类名。这适用于展开和折叠，但 iPhone 上没有动画？（我尝试过的所有其他过渡都可以很好地处理流畅的动画）有什么想法吗？

回答by 2grit

The (pure CSS) solution so far

到目前为止的（纯 CSS）解决方案

If you leave height:auto;and use fixed values of max-heightyou can simulate a transition:

如果您离开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 */
}

Pay attention to the transition duration and max-heightwhen the element is expanded. Play with the values until you get the wanted behavior.

注意过渡持续时间和max-height元素何时展开。使用这些值，直到获得所需的行为。

This way you can get a transition between two defined values (in the above example, from 0 to 300) while the heightproperty will just "follow" the max-heighttransition and grow until it gets the content's size.

通过这种方式，您可以获得两个定义值之间的转换（在上面的示例中，从 0 到 300），而该height属性将只是“跟随”max-height转换并增长，直到获得内容的大小。

---

---

Demos

演示

DEMO 1- a working example of this solution

DEMO 1- 此解决方案的工作示例

DEMO 2- just demonstration of what is going on in DEMO 1

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

---

---

Observations

观察

For now transitions are implemented only between predefined values and I supposed it is because the engine cannot guess the initial or final value in some cases. What if you have a height transition which its final value is 50% but transition itself affects the parent's height somehow?! It would probably require several reflowcalculations on each frame causing performance issues.

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

Like fabb said, the spec for CSS transitions determines that percentage values should be supported, so it might be just a matter of time until engines decides on which cases they're going to support transitions using dynamically valued points. Still, I'm not sure about what could be considered the correct behavior for autovalues thought.

就像 fabb 所说的那样，CSS 转换规范决定了应该支持百分比值，因此引擎决定在哪些情况下他们将使用动态值点支持转换可能只是时间问题。不过，我不确定什么可以被认为是auto价值观思考的正确行为。

回答by fabb

According to the W3C Spec on CSS3 Transitions, both lengthand percentageshould be allowed for a transition on the property height. So I guess it's just a matter of time until providing a percentage is supported in browsers.

按照W3C规范对CSS3过渡，无论是长度和百分比应该允许对物业过渡的高度。所以我想在浏览器中支持提供百分比只是时间问题。

回答by DDTech

i had the same issue. Transition worked fine when "collapsing", but appeared with no transition (like being "switched on") on "expanding", when "display:none" was set before.

我遇到过同样的问题。当“折叠”时过渡效果很好，但在“展开”时出现没有过渡（如“打开”），当“显示：无”之前设置时。

I accidentally came to a working solution while debugging: simply querying the "offsetHeight" seems to force an internal re-render of the element.

我在调试时不小心找到了一个可行的解决方案：简单地查询“offsetHeight”似乎会强制对元素进行内部重新渲染。

something like this:

像这样：

    showElement = function(){
       ...
       oEl.style.display = "block";
       var xDump = oEl.offsetHeight;
       oEl.className = "show";
    }

xDump is never used, but having it, made the differnce.

xDump 从来没有被使用过，但有了它，就会有所不同。

回答by Christian

I've used the following solution for elements where i need to toggle between display none and block, and keep the transition effect:

对于需要在不显示和块之间切换并保持过渡效果的元素，我使用了以下解决方案：

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);
    ...
}

the setTimeoutfunction will force a short delay allowing the transition to occur after toggling the display property. Hope it helps.

所述的setTimeout功能将迫使一个短暂的延迟允许切换的显示属性之后发生转换。希望能帮助到你。

回答by Nicholas

It is the change from display:none to display:block that is stopping the transition. Try setting the collapsed style to display:block; height:0; overflow:hidden;

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

Note: a expanded height of auto will also stop the transition. If there is no height set on the containing block then a height of 100% is equal to a height of auto.

注意： auto 的扩展高度也会停止过渡。如果在包含块上没有设置高度，那么 100% 的高度等于 auto 的高度。

回答by Adrian Ghizaru

Hopefully you've worked around this already, but I'm just writing to say I ran into the same problem: WebKit, at least on iOS 4.1, will not animate a transition if it was defined on an element styled with "display: none;", just like Nicholas mentioned above.

希望你已经解决了这个问题，但我只是想说我遇到了同样的问题：WebKit，至少在 iOS 4.1 上，如果它是在一个元素上定义的，那么它不会动画过渡，如果它被定义为“display:none” ;”，就像上面提到的尼古拉斯一样。

If your concern in not rendering this element is performance, like in my case, then I propose another solution than setting the height to 0. In your body's onLoad event callback, save the element in a variable and remove it from the DOM. Then re-insert it when it comes time to show it.

如果您担心不渲染此元素是性能，就像在我的情况下一样，那么我提出另一种解决方案，而不是将高度设置为 0。在您的身体的 onLoad 事件回调中，将元素保存在一个变量中并将其从 DOM 中删除。然后在需要显示时重新插入它。

回答by JCBrown

Here is a solution for those who want to use percentages.

这是那些想要使用百分比的人的解决方案。

The trick is to contain it inside a div with a set height and width. If you are floating container div's this may not be ideal, but if you are absolutely positioning containers this should work pretty good and as long as elements are not overlapping each other.

诀窍是将它包含在一个具有设定高度和宽度的 div 中。如果您是浮动容器 div，这可能并不理想，但如果您绝对定位容器，这应该可以很好地工作，并且只要元素不相互重叠。

here is the code

这是代码

.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>

on JSFiddle: http://jsfiddle.net/jtZ8j/7/

在 JSFiddle：http: //jsfiddle.net/jtZ8j/7/

回答by Calle Bjernekull

CSS solution without need to calculate max-height

无需计算 max-height 的 CSS 解决方案

Here's my solution if the total height is not known

如果总高度未知，这是我的解决方案

.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>

Working example

工作示例