Эффекты перехода для строк таблицы

Question

Я пытаюсь создать эффект перехода при перемещении между страницами данных, представленных с использованием макета таблицы HTML.В идеале я хотел бы использовать любой из обычных переходов пользовательского интерфейса jQuery, однако это оказывается трудным.

То есть, если я применяю эффект ко всей таблице, все в порядке.Однако я не хочу, чтобы строка заголовка была затронута, она должна оставаться статической, поэтому это бесполезно.

Применение эффекта к тегу <tbody> приводит к непредсказуемым результатам - форматирование становится ошибочнымво время перехода по-разному.

Я могу применять эффекты одновременно ко всем строкам таблицы, а не к элементу-обертке - но это действительно хорошо работает только для однородных эффектов (например, простых fadeout / fadein).

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

Есть ли лучшие способы сделать эту работу лучше, не отделяя заголовок от таблицы, или это действительно единственный способ сделать это с хорошими результатами?

Answer 1

Вы не опубликовали код для работы, поэтому я могу только дать вам указания.Однако я бы посоветовал вам попробовать следующее:

• Применить position: relative; к родительскому элементу таблицы (добавьте, если необходимо),
• Дублировать элемент <table> (безего потомки),
• Примените position: absolute; и соответствующий z-index к новой таблице, чтобы она оставалась поверх оригинала,
• Глубоко клонируйте строку заголовка и append()это к новой таблице,
• Добавьте новую таблицу к родительскому элементу, чтобы новая строка заголовка маскировала исходную во время анимации,
• Выполните анимацию на исходном <table>элемент,
• remove() новый <table> элемент.