Синхронизация высоты div в состоянии анимации

Question

У меня проблема с синхронизацией высоты с тремя столбцами (div-элементами).Один из столбцов - это основной контейнер содержимого.Но у меня есть некоторая анимация в контейнере основного контента, поэтому я хочу синхронизировать высоту с двумя другими столбцами во время и после анимации.Анимация - это CSS 3 анимация webkit-перехода.И анимация происходит не в самом столбце, а в содержимом контейнера основного содержимого.Я попытался с таблицами и установив высоту div столбца на 100%.Дело в том, что колонка синхронизируется после анимации.Я тоже пытался с Jquery, но безуспешно, такая же проблема там.

Наконец, я хочу уточнить.Я хочу, чтобы они синхронизировались во время анимации, а не после!

Было бы неплохо, чтобы кто-нибудь мог предложить решение без необходимости постоянно вызывать функцию, например syncColumnHeight (); // получает высоту столбцаконтейнер основного содержимого и вставляет его в два других столбца.

ОБНОВЛЕНИЕ: 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>

Answer 1

Это немного трудно решить, не глядя на ваш CSS, но я предполагаю, что у divs есть стиль столбца, тогда как для tds это нужно.

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

Итак, в коде:

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