Если у меня есть строка, подобная
A BCDE
Где контейнер - это div с display: flex, и каждая буква - это свой собственный div (только что представленный ей одиночными буквами для иллюстрация), как проще всего анимировать A, скользя вправо, чтобы соединить остальные буквы? Я говорю о простом (и, вероятно, единственном) изменении свойства css, когда анимация обрабатывается transition.
Я мог бы представить изменение его свойств left, right или даже margin, но я предполагаю, что это потребует вычисления оставшейся ширины, положения других букв и т. Д. c. Кажется, что должен быть намного более простой способ.
Я мог бы представить себе контейнер justify-content: flex-end и затем изменить A's justify-self, но я не думаю, что justify Свойства / align анимируемы!
Редактировать: приведенный ниже ответ с flex-grow хорош для этого очень конкретного c примера, который я дал. Тем не менее, на самом деле я собираюсь сделать следующее:
В рецепте есть шаги, и у каждого шага может быть таймер. Таймер для шага находится слева (как A в первом примере). Любые активные таймеры (во всем рецепте) находятся справа (как BCDE). Когда вы запускаете таймер, он перемещается из левой части в правую часть. Тогда любой последующий шаг, имеющий таймер, будет иметь свой таймер в левой части. Таким образом, каждый таймер должен быть своим собственным элементом, и даже если бы я использовал flex-grow каждый раз, когда таймер перемещался, этот таймер все равно должен был бы перейти в правую часть.
Я могу принять ситуацию, когда все таймеры находятся в одном контейнере, но им все равно придется перемещать себя, а не свой контейнер, если это имеет смысл.
Бонус: что если A находится в другом контейнере, чем остальные буквы? (Где эти два контейнера являются прямыми потомками исходного flex-элемента)