Есть ли способ иметь переход по порядку элементов гибкой коробки?
Другими словами, могу ли я получить это (подробности в этом fiddle)
#container {
display: flex;
}
#container:hover div:last-child {
order: -1;
}
анимированный (элемент, получающий новую позицию, занимает позицию со временем), пожалуйста?
К сожалению нет: атрибут заказа анимируется, но только как целые числа. Это означает, что для каждого шага/кадра анимации он будет интерполировать значение полы на целое число. Таким образом, элементы будут отображаться только в слоте, который приводит к вычисленному целочисленному значению, никогда не находясь между ними каким-либо плавным способом движения.
Это технически еще анимация: вычисленная целочисленная позиция должна по-прежнему следовать правилам синхронизации и правилам ключевого кадра анимации, а именно, что элементы "прыгают" из положения в положение по мере их изменения.
См. https://developer.mozilla.org/en-US/docs/Web/CSS/integer#Interpolation
Как заявил Эмиль, он только оживляет целое число. Однако я думаю о взломе:
height, установите обертку overflow: visibleheight.order и transition на всех них.order обертки и посмотрите, как она переходит.К сожалению, это уродливое и работает только в Firefox. Вот что я тестировал в Angular
Если вы просто заинтересованы в анимировании списков, проверьте mixitup. Супер легкая реализация и
На самом деле я не отвечаю на вопрос, потому что я не использую свойство заказа.
Но я хотел сделать что-то похожее на то, что вы ожидаете, и, наконец, решил добавить атрибут data-order в мои элементы, которые я изменяю с помощью Javascript, и анимировать элементы с помощью CSS. https://codepen.io/anon/pen/OdgBrg
Это может быть полезно, если вы хотите анимировать слайдер (или что-то еще), но хотите сохранить порядок элементов в HTML для целей доступности, что является одним из полезных вариантов использования свойства order. См. Https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_F Flexible_Box_Layout/Ordering_Flex_Items#The_order_property_and_accessibility