Анимированное ретрансляция веб-страницы

Question

Предположим, у меня есть html table, где ячейки содержат span s. Некоторые действия заставляют divs span s изменить свое положение, например, я реконструирую таблицу транспонированных.

Рассмотрим

<table> 
<tr> 
    <td id='cell1'>1</td> 
    <td id='cell2'>2</td> 
</tr> 
<tr> 
    <td id='cell3'>3 
     <div id='el'>foo</div> 
    </td> 
    <td id='cell4'>4</td> 
</tr> 

и

setTimeout(function() { 
     document.getElementById('cell2').appendChild(document.getElementById('el')) 
    }, 2000); 

Как я могу оживить позиционную изменить span S'?

Мое первое решение проблемы заключается в том, чтобы создать новую таблицу, скрытую сверху старого, сохранить абсолютные позиции каждого span, старых и новых, разместить абсолютно позиционные копии span s поверх старых , оживить их до новых позиций, удалить старую таблицу, открыть новую таблицу и, наконец, удалить абсолютно позицию span копий.

Есть ли лучший способ?

Answer 1

Если я правильно понял ваш вопрос, как насчет использования свойства CSS transition?

Я не думаю, что вам нужно создать копию всей таблицы и выполнить любые вычисления.

Для примера предположим, что вы хотите переместить обновленный пролет вверх. Вы можете определить класс CSS, который содержит необходимое дополнение, например, в my example, и просто добавить этот класс CSS в область, которую вы обновляете.

Одна линия CSS, как это, позволяет анимировать движение пролетов:

transition: all 0.5s ease; 

EDIT

я смог оживить вашу скрипку с помощью this article by Tim Taubert

You can find the updated fiddle here