Здравствуйте!
Чисто технически, ничего сложного, всё очень просто, но интересует максимально правильное решение нижеследующий проблемки.
P.S. Извините за длиннопост с большим количеством графики, но мне кажется, что так моя проблема будет выглядеть нагляднее (для тех, кто лучше воспринимает графику).
Есть четыре блока (жёлтые), находящиеся в одном родителе (зелёный) и стоящие в ряд, у всех фиксированная высота (на примере ширина каждого - 140px, высота - 100px и по 5px с каждой стороны). За ними следует ещё один блок с каким-нибудь контентом (серый). Очень популярная ситуация. Правда, между ними находится кнопочка, с которой связано всё самое интересное.
Изображение 1 - Начальное положение
По нажатию на кнопочку должно происходить примерно следующее: блоки должны спускаться вниз так, чтобы по горизонтали был только один блок, а потом должны все:
- Выстроится по левой стороне вплотную к линии;
- Иметь стопроцентную ширину;
- После этого в каждом из блоков расхайдится контент и они перестают быть одинаковой высоты.
При этом, анимация должна быть плавно. Если поэтапно, то выглядеть должно это примерно так:
Изображение 2 - Этап первый - блоки спускаются вниз
Изображение 3 - Этап второй - блоки отодвигаются влево
Изображение 4 - Этап третий - блоки получают стопроцентную ширину
Изображение 5 - Этап последний - появляется дополнительный контент, высота не фиксирована
Реализацию я вижу следующую. Чтобы блоки в дальнейшем без проблем спускались вниз, они все
position: absolute.
Если подробнее (относится к Изображению 1):
.parent {
position: relative;
height: 400px;
width: 600px;
background: green;
}
.parent .block {
position: absolute;
top: 0;
height: 100px;
width: 140px;
background: yellow;
}
.parent .block#block-1 {left: 5px;}
.parent .block#block-2 {left: 155px;}
.parent .block#block-3 {left: 305px;}
.parent .block#block-4 {left: 455px;}
На кнопку вешаем маленький скрипт. Здесь, по сути, есть два варианта, один из которых - при клике повесить на родителя
.parent ещё какой-нибудь класс, а потом через
transition их все плавно опустить. А ля так (относится к Изображению 2):
.parent.animate {height: 400px; transition: height .2s linear;}
.parent.animate .block {transition: top .2s linear;}
.parent.animate .block#block-2 {top: 100px;}
.parent.animate .block#block-3 {top: 200px;}
.parent.animate .block#block-4 {top: 300px;}
Затем через
transition-delay сделать всё так, как показано на Изображениях 3-5.
На пятом изображении контент показываетя посредством снятия
display: none; с одно из внутренних блоков. На примере это только текст, на самом деле у меня там могут быть и линии, и ещё какие-то блоки и т.п. И на пятом изображении добавил красные линии для наглядности примера и убрал кнопку за ненадобностью.
А можно не делать посредством добавления класса родителю со всеми вышеописанным танцами, можно сделать всю анимацию в самом JS с добавлением
delay() и т.п.
Резюмируя вышесказанное, проблемы у меня такие.
- Во-первых, как всё-таки лучше делать анимацию? Через добавление класса или в самом JS?
- Во-вторых, полагаю, что на последнем этапе с блоков надо снять
position: absolute, а родителю, как, в прочем, и дочерним блокам, снять фиксированную высоту. В таком случае вариант с добавлением класса родителю сильно всё усложняет, т.е. лучше анимировать всё в самом JS.
Важно ещё то, что ниже всех этих блоков есть ещё какое-то содержание, отображение которого не должно изменяться.
Буду благодарен за любую помощь в устранении данных проблем.
С уважением,
Александр.
Изображение 1 - Начальное положение
Изображение 2 - Этап первый - блоки спускаются вниз
Изображение 3 - Этап второй - блоки отодвигаются влево
Изображение 4 - Этап третий - блоки получают стопроцентную ширину
Изображение 5 - Этап последний - появляется дополнительный контент, высота не фиксирована
Простой
