Как анимировать HTML таблицу?

Question

[Сергей Грибок]

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


Немного погуглив я узнал что анимировать tr прямым образом невозможно. Можно изощриться и добавлением дивов к td сделать slideUP/DOWN, но мне этот вариант не подходит.

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

Comments

[Капитан Какао]

Вообще не понимаю зачем в 21 веке верстать таблицами, делайте на дивах и flex box, гибкость будет такая, что ещё не раз будите радоваться что отказались от таблиц.

[Negwereth]

Rad Cor: табличные данные должны верстаться таблицами

[Капитан Какао]

Negwereth: обоснуйте.

[Negwereth]

Rad Cor: обоснуйте вашу категорическую позицию относительно неиспользования таблиц вообще

[Сергей Грибок]

Rad Cor: По правде говоря я согласен с этим. Ведь таким образом в HTML разметке ничего не надо кроме дивов.
Ведь все можно сделать дивами. А это уже болезнь.

[Капитан Какао]

Negwereth: во-первых гибкость и возомжности, во-вторых, длинна кода.

[Negwereth]

Rad Cor: ваша фраза говорит мне, что вы мало знаете о HTML-таблицах.
www.w3.org/TR/html401/struct/tables.html

[Капитан Какао]

Negwereth: серьёзно?
Вот пример, разметка одна и та же, но изменяя пару строчек CSS мы кардинально меняем структуру таблицы.
Реализуйте пожалуйста мне тоже самое на гавнотаблицах, к тому же так, что бы на выходе код получился меньше по размеру в байтах.

[Капитан Какао]

Сергей Грибок: можно и без дивов.

[Negwereth]

Rad Cor: это не таблица у вас. Я вот что-то не могу придумать пример, в котором один и тот же сет данных нужно было выводить настолько по-разному.
Вы не путайте вёрстку структуры таблицами и отображение табличных данных.

[Капитан Какао]

Negwereth: извольте, а что же это если не таблица? Самая настоящая таблица, только современная а не аля 2000ные. И повторюсь, такая таблица гараздо гибче, лучше, компактнее и практичнее, чем ваши моральна устаревшие table.
И если бы люди не боялись всего нового, и не любили себе усложнять жизнь, уже бы давно перешли на flex box, и не задавали бы глупых вопросов как этот, типа что делать если эффект не применяется к ячейке.

Я вам привёл куче доводов и живых примеров того, что flex box лучше таблиц. Вы же только ерунду говорите и ни чем не можете подкрепить свои странные доводы.

[Negwereth]

Rad Cor: ТАБЛИ́ЦА
Женский род
Сведения о чём-н., расположенные по графам.

Т. умножения перечень всех в пределах первого десятка помножаемых друг на друга чисел с произведением от каждой пары

Вот, что такое таблица.

Ещё вот вам изображение:

[AlikDex]

Rad Cor: Видимо тебе никогда не приходилось пользоваться табличными данными, или у тебя неверное понимание что это такое.
Давай вместе подумаем, зачем, для чего, и главное как применять твой говнопример для такого?

[Капитан Какао]

Negwereth: и что? Что за бред? Чем таблица на table лучше таблицы на flex box?
Вы мне втираете какую то дич.

Ещё раз вам говорю возможностей у flex box гораздо больше чем у устаревших table. Код чище, короче и нереально гибче. Ни одна таблица на table не сможет сделать того что таблица на flex box.

Если вы дерёвня, то пожалуйста, пишите и дальше на table. Но раз вы слепо не хотите видеть преимущество современных технологий, тогда рекомендую вам по мимо table ещё и углы закруглять картинками, и тени с градиентами тоже делать картинками. Ведь по вашему раз таблица на flex box не таблица, то и градиент на CSS3 не градиент.

Я завершаю с вами диалог, ибо ни чего нового и полезного от вас я не узнаю. Всего доброго.
Передавайте привет в 2000 от меня;)

[Капитан Какао]

AlikDex: в смысле зачем применять мой пример? Если вы о возможностях перестроеня таблицы, то это я просто показал возможности, притом минимальные возможности flex box.
А применять вместо таблиц, во-первых повторяю в сотый раз для глупых, мой код куда короче чем на table, и во-вторых с моим кодом автор не столкнулся бы с той проблемой которая его застала с устаревшими table.

[AlikDex]

Rad Cor:

Ни одна таблица на table не сможет сделать того что таблица на flex box.

Вопрос. А нужно ли? Таблицы предназначены для вывода табличных данных. Ей твои говнофлексбоксы вообще не нужны.

[Капитан Какао]

AlikDex: всё ясно, ещё один проходимец из прошлого. С глупыми людьми не вижу смысла спорить.

[AlikDex]

Rad Cor:

в смысле зачем применять мой пример? Если вы о возможностях перестроеня таблицы, то это я просто показал возможности, притом минимальные возможности flex box.

Два изображения сверху. Сделай ка их адаптивными на флекс боксах из своего примера.

А применять вместо таблиц, во-первых повторяю в сотый раз для глупых, мой код куда короче чем на table, и во-вторых с моим кодом автор не столкнулся бы с той проблемой которая его застала с устаревшими table

Короче ага. Цсс ты учел? А поддержку браузеров?

Раз уж речь зашла о "короче". Следует обзывать свои классы при верстке в 1-3 буквы. Коротко же. А то понимаешь этот сраный БЭМ увеличивает размер кода несусветно со своими длиннючими названиями блоков и модификаторов. В яндексе дурачки сидят походу.

[Капитан Какао]

AlikDex: при чём здесь бэм, БЭМ для структуры сайта, а для простой таблицы достаточно 1 символа в названии класса.

Два изображения сверху. Сделай ка их адаптивными на флекс боксах из своего примера.

Без проблем, давай мне не картинку а эту же таблицу кодом на https://jsfiddle.net и я сделаю на flex box, чисто ради того что бы утереть тебе глупцу нос, я потрачу время, но сделаю таблицу на флексах и она будет лучше гавноtable!

[AlikDex]

Rad Cor: без проблем. ща наклепаю. Ты должен сделать свою таблицу адаптивной но при этом чтоб не потерялась читаемость. Далеко не уходи =)

[Капитан Какао]

AlikDex: жду)

[AlikDex]

Rad Cor: https://jsfiddle.net/ydavnzhk/
Тоже самое, но адаптивное на флексах. Очень интересно.

[AlikDex]

Rad Cor: ну че там, как дела с флексом? Получилось чи ни? :D
А то мы тут темные люди новых трендов не понимаем совсем. Устарели бедняги )))

[Капитан Какао]

AlikDex: не дождался вчера, не паникуй, сча всё сделаю;)

[Капитан Какао]

AlikDex: пожалуйста: https://jsfiddle.net/RadCor/ydavnzhk/5/ или на чистом css https://jsfiddle.net/RadCor/ydavnzhk/6/
Кстати как и говорил мой код в любом случае весит меньше чем гавнотабличный ;)

И пожалуй для таблиц такого типа может и логичней использовать table, если это будет простой вывод какой-то фигни табличной. Но когда ты делаешь простую таблицу как у автора в вопросе

к тому же хочешь применять всякие эффекты к ней, лучше флекс бокс чем тейбл.

[AlikDex]

Rad Cor: 10 минут не дождался. Ок ))
А где адаптивность то? Такую таблицу я и сам сделаю. Ты показал пример, где таблица была сделана адаптивно и выдал это как за основное преимущество (над устаревшей table).

[Капитан Какао]

AlikDex: в смысле где адаптивность? В таблице где... Или что ты имеешь ввиду под адаптивностью, если эта по твоему не адаптивная?

Такую таблицу я и сам сделаю.

Ну после того как я показал как делать, конечно сделаешь, а до этого кричал что не знаешь как делать и хочешь посмотреть) Ха, ну молодец конечно)

[AlikDex]

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

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

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

П.с. Размер кода никого не интересует до разумных пределов, конечно же. Переименование тегов таблицы в однобуквенные теги к этому не относятся. Т.к. мало кто делает, например, стирание лишних пробелов из хтмл. Про именование БЭМ я тоже уже упоминал, что напрямую ведет к увеличению размера кода.

П.П.С.

Ну после того как я показал как делать, конечно сделаешь, а до этого кричал что не знаешь как делать и хочешь посмотреть) Ха, ну молодец конечно)

Мне интересен был именно адаптивный(гибкий) вариант таблицы (со смещением колонок, как было показано в примере).

Answer 1

[zano3adev]

Проверено в Chrome & Firefox

tr{
    transition:
        transform   1s linear 0s,
        opacity     1s linear 0s,
        font-size 0.5s linear 0.5s;
}
tr.deleted{
    transform: translateX(100%);
    opacity: 0;
    font-size: 0;
}

пример

Comments

[Сергей Грибок]

ваууу.

Answer 2

[bigProblem]

Почему не нравиться вариант с div. Делай на них. Присваивай display: table и дальше по списку всем остальным (вложенным). И делай любую анимацию.

Answer 3

[Negwereth]

translate3d отлично срабатывает на tr. Но не translateX, к примеру. Попробуйте.

Answer 4

[ThunderCat]

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