Как сделать анимацию ширины строкового элемента?

Question

[Александр Епихин]

Вот сниппет. Пр нажатии на кнопку первый элемент становится во всю ширину родителя, остальные элементы уезжают на вторую строку. Это требуемое поведение. Необходимо добавить анимацию изменения ширины. Без использования js, при условии что мы не знаем начальную ширину элемента, так как она всегда будет по контенту внутри. Стили можно извращать как угодно, лишь бы добиться результата.

Answer 1

[Олег]

span {
display: inline-block;
margin: 3px;
padding: 5px;
background: blue;
transition: all ease-in-out 1s;
min-width: 10px;
width: auto;
}

span.active {
min-width: 100%;
}
и заработает

Comments

[Александр Епихин]

Я люблю тебя.

[Олег]

Александр Епихин, добра!

[profesor08]

В этом способе есть раздражающий нюанс, заключающийся в том, что чем больше элемент и медленнее анимация, тем дольше элемент будет оставаться без изменений. Своего рода инпут-лаг.

[Александр Епихин]

profesor08, cпасибо за замечание. Да, я заметил это. В моем случае общая продолжительность анимации будет 0.2-0.3 сек. Так что думаю могу себе позволить закрыть на это глаза

Answer 2

[profesor08]

Необходимо добавить анимацию изменения ширины. Без использования js, при условии что мы не знаем начальную ширину элемента.

CSS анимации не работают с значениями свойств типа auto. Для анимаций нужны конечные величины, а не неизвестные. Увы, но придется делать на js.

Comments

[Олег]

дополнительно min-width удаётся санимировать, не трогая width

[profesor08]

Олег, я отписал комментарий по поводу такого костыля.

[Александр Епихин]

profesor08, у меня была теория насчет auto, вы ее подтвердили. Спасибо. Флексы также не срабатали. Анимация flex-grow от 0 до 1, при flex-wrap: wrap, увеличила элемент, но не на всю ширину родителя, а только на ширину свободного пространства.

[profesor08]

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