Короткий и сладкий вариант:
Можно ли комбинировать position: relative и position: absolute с плавными переходами CSS?
Расширенная версия:
Я создаю небольшой виджет (я называю его палубой), и я не смогу иметь свернутое и расширенное состояние. Все хорошо, пока это нормально работает.
Переключение между двумя состояниями, естественно, требует переходной анимации. Это тоже работает, но не так, как хотелось бы. То, что я хотел бы сделать, - это использование CSS-перехода вместо использования абсолютного позиционирования с использованием JavaScript, как и сейчас.
Увы, нынешний сценарий заключается в том, что в расширенном состоянии карты в колоде всегда позиционируются абсолютно, их позиция вычисляется "на лету", поскольку они добавляются в колоду. Когда рушится, первые четыре складываются каскадным образом, а остальные - на четвертую. Визуальный имитирующий стек.
Проблема с этим подходом заключается в том, что я не могу полагаться на нормальный поток макета для размещения карт, что отстойно по многим причинам. Если я использую position: relative для карт в расширенном состоянии, они отлично меняются один за другим. Но переход к свернутому состоянию не анимируется - просто мгновение привязывается к одной позиции в другую. Это, конечно, логично, так как без абсолютного позиционирования в первую очередь браузер явно не знает, с чего перейти.
То, что у меня есть до сих пор (Fiddle):
CSS (только соответствующие правила):
div.deck-container {
position: relative;
}
div.deck-container li {
display: inline-block;
position: relative;
-webkit-transition: all 0.5s ease-in-out;
-moz-transition: all 0.5s ease-in-out;
-o-transition: all 0.5s ease-in-out;
-ms-transition: all 0.5s ease-in-out;
transition: all 0.5s ease-in-out;
}
div.deck-container.collapsed li {
position: absolute;
left: 9px;
top: 6px;
}
div.deck-container.collapsed li:first-child {
left: 0;
top: 0px;
}
div.deck-container.collapsed li:nth-child(2) {
left: 3px;
top: 2px;
}
div.deck-container.collapsed li:nth-child(3) {
left: 6px;
top: 4px;
}
HTML (только соответствующая разметка):
<div class="deck-container">
<ul>
<li>Card 1</li>
<li>Card 2</li>
<li>Card 3</li>
<li>Card 4</li>
<li>Card 5</li>
</ul>
</div>
В моем прекрасном мире добавление класса collapsed в div.deck-container будет анимировать карты в их рухнувшие позиции и наоборот, но, похоже, это невозможно. Пожалуйста, скажите мне, что я не прав.
