在动画状态期间同步 div 高度答案

【问题标题】：Syncing div height during animation state在动画状态期间同步 div 高度
【发布时间】：2011-02-09 20:37:31
【问题描述】：

我在将高度与三列（div 元素）同步时遇到了问题。其中一列是主要内容容器。但是我在主内容容器中有一些动画，所以我想在动画期间和之后将高度与其他两列同步。动画是 CSS 3 webkit-transition 动画。并且动画不是发生在列本身，而是发生在主内容容器的内容中。我尝试过使用表格并将列的 div 高度设置为 100%。问题是该列在动画之后同步。我也尝试过使用 Jquery，但没有成功，同样的问题。

最后我想澄清一下。我希望它们在动画期间同步，而不是之后！

如果任何人都可以提供解决方案而不必一直调用函数，例如syncColumnHeight();//获取主要内容容器的列高并将其插入其他两列，那就太好了。

更新：以table元素开头的html代码：

<table>
    <tr>
        <td>
            <div id='leftColumn'></div>//I want this to sync with the height of the mainContentColumn
        </td>
        <td>
            <div id='mainContentColumn'></div>//All the animation is occuring here
        </td>
        <td>
            <div id='rightColumn'></div>//I want this to sync with the height of the mainContentColumn
        </td>
    </tr>
</table>

【问题讨论】：

你能提供一些关于上述列的 HTML 吗？我不完全确定结构是什么样的。
所以我添加了html代码

标签： html animation css

【解决方案1】：

如果不查看您的 CSS，这有点难以解决，但我猜 div 具有列样式，而 td 是需要它的。

http://jsfiddle.net/duopixel/weG8P/

所以，在代码中：

table td {
  /*Apply column styles such as background-color here*/
  -webkit-transition: all 1s ease;
}

【讨论】：