Анимация разрыва между элементами в зависимости от их содержания жидкости

Версия TL: DR: мне нужно 3 из этих бок о бок, чтобы их процентная ширина увеличивалась при открытии и имела достаточно данных, чтобы отбросить остальных.

У меня есть тонкий раздел в верхней части моей страницы, который должен оставаться изменчивым, и, следовательно, его содержимое имеет всю ширину, определенную как процент. Внутри этого раздела у меня есть 3 элемента (на самом деле это 3 столбца из 3 примера панели, следовательно, 3 * 3 = 9 разборных панелей, но, насколько я могу судить, это может быть просто любой другой div, и большинство решений все равно будут работать то же самое), которые имеют ровно анимированную высоту, когда нажимают на их содержимое.

Кроме того, при открытии панелей ширина панелей ALL становится подходящей для всех отображаемых материалов панелей, соответственно изменяя размер свободного пространства для каждой панели. Вот почему:

Для простоты, и поскольку ни одно другое решение пока не было более функциональным до сих пор, панели 3 * 3 делятся на три столбца из трех панелей каждый в ячейке в невидимой таблице как таковой:

<table>
<tbody><tr><td> [3PanelColA] </td><td> [3PanelColB] </td><td> [3PanelColC] </td></tr></tbody></table>

Другими словами, это отлично работает. Всякий раз, когда вы нажимаете на любую из 9 панелей, она плавно открывается вниз, и ширина всех панелей (ячеек таблицы) изменяется в соответствии с тем, сколько контента находится на открытых панелях, и в то же время все может быть изменено в любое время в зависимости от размера верхней части (или изменения размера окна браузера). Есть только одна проблема: панели на их нынешнем этапе при правильном открытии и в соответствии с их надлежащей процентной шириной плавно опускаются вниз, но их ширина просто защелкнутся на месте!

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

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

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

Этот пример здесь близок к тому, что мне нужно (я бы просто сократил его до 3 * 3 безликих панелей вместо 5 * 6): http://css-tricks.com/examples/InfoGrid/. У него есть сетка панелей, и всякий раз, когда вы открываете его, он меняет размер всех других, соответственно, ширина специфична и определяется в количестве пикселей, а не в процентах, и, похоже, она не поддерживает открытие какой-либо желаемой суммы панелей одновременно, независимо от того, что я с ним делаю.

Я готов попробовать любой подход, который вы можете предложить, просто имейте в виду, что;

  • Это должно быть 3 на 3 вниз-расширяемые/разборные панели, которые все изменяют размер плавно в соответствии с другими отображаемыми содержимым и могут открываться/закрываться независимо друг от друга
  • Размеры (или, по крайней мере, ширина) должны быть на основе процентов, а не фиксированные количества пикселей
  • Если возможно, он должен использовать как можно меньшую полосу пропускания и размер файла, предпочтительно не более 15 КБ

Решение может быть таким же простым, как анимировать ширину ячеек таблицы при открытии панели или помещать столбцы панели в какие-то div/элементы, ширина/зазоры которых обновляются при открытии панели или с использованием полностью новой системной сетки или некоторые такие.

1 ответ

Просто бросил это вместе, так что это довольно грубо и прототип, но я думаю, что это может быть то, что вы ищете?

<div>
 <div>
 
 
  
 </div>
 <div>
 
 
  
 </div>
 <div>
 
 
  
 </div>
</div>

См. Остальные @http://jsfiddle.net/axv7T/

licensed under cc by-sa 3.0 with attribution.