css - 为什么在隐藏元素时设置属性后显示元素时会发生转换？

Question

可以看到一个活生生的例子here .

红色方 block (显示)直接位于绿色方 block (隐藏为溢出)上方。单击正方形，两个彩色正方形立即变为完全透明。另外，红色方 block 的高度设置为0；这会触发一个过渡，但过渡是看不见的，因为红色方 block 现在是透明的。

在再次单击正方形之前，检查 toggle 函数。查看 JavaScript，我希望红色方 block 的高度在不触发转换的情况下重置为其原始值。过渡应该被抑制，因为过渡属性在高度更改时临时设置为 none。

现在再次点击正方形。两个彩色方 block 立即变得完全不透明，但红色方 block 在其高度从 0 过渡到原始值时向下滑动。就好像由内联样式设置的高度在元素可见之前没有被 toggle 函数删除，到那时 transition 属性也被重置了。

触发回流似乎强制应用高度的变化。 (取消注释包含要测试的 offsetParent 的行。)这种行为发生在浏览器中(至少是 Chrome 和 Safari、Firefox 和 Opera)，所以我想知道它是否不是某些规范的一部分。我检查了 CSS Transitions Module没有成功。知道为什么会出现这种行为，以及为什么它在各个实现中如此一致吗？

Answer 1

这真是个奇怪的问题。我认为您的代码没有做错什么——当前的浏览器实现只是有问题。

在使用 CSS 转换之前，我遇到过这些看似显而易见的错误，如果不求助于拜占庭式的 hack，处理这些错误是一个巨大的痛苦，一旦他们正在解决的错误被修复，这些错误肯定会被打破(在这种情况下，我的 WebKit 修复)。

我真的深入研究了这个问题，但无法想出一个适用于支持过渡的三个主要布局引擎(WebKit、Gecko 和 Presto)的干净解决方案。也就是说，这就是我确实弄清楚的——希望比我聪明的人(或者只是用新的眼光看待这个问题)可以接受这个答案并将其变成真正的解决方案。

Gecko 和 Presto(但不是 WebKit!)

看起来(我不是浏览器工程师或不熟悉规范)transition-property 的任何当前或以前的值都将继续呈现不管是否需要。因此，即使您更改了 transition-property 的值，浏览器仍会在后台呈现高度过渡，当您将高度更改回来时，您会得到它的尾端。

虽然有一个解决方案:在 JavaScript 中创建 transition(不要将它放在样式表中的任何位置)，然后删除它(之后就没有 transition应用于 DOM 中任何位置的 #upper 的规则)，更改高度，然后重新添加它。不完美，但也不是依赖错误的黑客攻击。

http://jsfiddle.net/grantheaslip/e3quW/

JavaScript

upper.style.removeProperty('transition');
upper.style.removeProperty('-o-transition');
upper.style.removeProperty('-moz-transition');
upper.style.removeProperty('-webkit-transition');
upper.style.removeProperty('height');
// force a reflow
// if (upper.offsetParent) { /* empty */ }
upper.style['transition'] = 'height 1000ms';
upper.style['-o-transition'] = 'height 1000ms';
upper.style['-moz-transition'] = 'height 1000ms';
upper.style['-webkit-transition'] = 'height 1000ms';

样式表

#upper {
    background-color: red;
}

WebKit(但不是 Gecko 或 Presto!)

任何只因为 1 毫秒超时才起作用的东西可能永远不会接近生产，但我认为这值得指出，以防它帮助人们找到这个问题的根源。

我的猜测是，WebKit 没有与 Presto 或 Gecko 相同的问题，而是包括一项优化，该优化收集在同一函数中应用的样式更改并同时应用它们。同样，纯粹是来自从未接触过 WebKit 源代码或 CSS3 规范的人的猜测。

http://jsfiddle.net/grantheaslip/DFcg9/

JavaScript

window.setTimeout(function() {
    upper.style.removeProperty('transition-property');
    upper.style.removeProperty('-o-transition-property');
    upper.style.removeProperty('-moz-transition-property');
    upper.style.removeProperty('-webkit-transition-property');
    upper.style.removeProperty('opacity');
    lower.style.removeProperty('opacity');
}, 1);

Gecko、Presto 和 WebKit

这是两种解决方案的结合。同样，由于超时 hack，这真的不应该使用。

http://jsfiddle.net/grantheaslip/N3NrB/