CSS转换不工作的百分比高度？ [英] CSS transition not working for percentage height?

问题描述

我有以下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）解决方案

h2>

如果您留下 height：auto; ，并使用固定值 max-height 您可以模拟转换：

  .details-expanded {
 max-height：300px; / *尝试猜测您的内容的最大高度* / 
} 
 
 .details-collapsed {
 height：auto; 
 max-height：0; 
 transition：max-height 500ms linear; / *选择比例持续时间* / 
} 
  

注意转换持续时间和 max-height 。

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

---

演示

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

DEMO 2 - 仅演示DEMO 1中的操作

---

观察

现在转换仅在预定义值之间实现，因为在某些情况下引擎不能猜测初始值或最终值。如果你有一个高度过渡，其最终值是50％，但转换本身影响父的高度不知何故？这可能需要几次 回流 计算每个帧导致性能问题。

像fabb说的 ，CSS转换的规范确定应该支持百分比值，因此它可能只是一个时间问题，直到引擎决定在哪些情况下他们将支持转换动态赋值点。仍然，我不知道什么可以被认为是 auto 值的思想的正确行为。

I have the following CSS definitions:

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

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?

解决方案

The (pure CSS) solution so far

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

.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-height when the element is expanded. Play with the values until you get the wanted behavior.

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

---

Demos

DEMO 1 - a working example of this solution

DEMO 2 - just demonstration of what is going on in DEMO 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 reflow calculations on each frame causing performance issues.

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 auto values thought.

这篇关于CSS转换不工作的百分比高度？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！