Использовать переход на flexbox порядке

Есть ли способ иметь переход по порядку элементов гибкой коробки?

Другими словами, могу ли я получить это (подробности в этом fiddle)

#container {
    display: flex;
}
#container:hover div:last-child {
    order: -1;
}

анимированный (элемент, получающий новую позицию, занимает позицию со временем), пожалуйста?

Ответы

Ответ 1

К сожалению нет: атрибут заказа анимируется, но только как целые числа. Это означает, что для каждого шага/кадра анимации он будет интерполировать значение полы на целое число. Таким образом, элементы будут отображаться только в слоте, который приводит к вычисленному целочисленному значению, никогда не находясь между ними каким-либо плавным способом движения.

Это технически еще анимация: вычисленная целочисленная позиция должна по-прежнему следовать правилам синхронизации и правилам ключевого кадра анимации, а именно, что элементы "прыгают" из положения в положение по мере их изменения.

См. https://developer.mozilla.org/en-US/docs/Web/CSS/integer#Interpolation

Ответ 2

Как заявил Эмиль, он только оживляет целое число. Однако я думаю о взломе:

  • Поместите элемент, который вы хотите отобразить в оболочке с 1/10 из height, установите обертку overflow: visible
  • Затем поместите 9 разделительных элементов между этими обертками с тем же height.
  • Поместите order и transition на всех них.
  • Измените order обертки и посмотрите, как она переходит.

К сожалению, это уродливое и работает только в Firefox. Вот что я тестировал в Angular

Ответ 3

Если вы просто заинтересованы в анимировании списков, проверьте mixitup. Супер легкая реализация и

https://www.kunkalabs.com/mixitup/

Ответ 4

На самом деле я не отвечаю на вопрос, потому что я не использую свойство заказа.

Но я хотел сделать что-то похожее на то, что вы ожидаете, и, наконец, решил добавить атрибут 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