Анимация ширины div временно останавливается, когда она попадает в текстовое содержимое
Я пытаюсь удалить кнопку с анимацией onClick. Анимация начинается, но как только она достигает текстового содержимого внутри кнопки, анимация сильно замедляется.
Я сделал codeandbox, чтобы показать проблему: https://codesandbox.io/s/9y1pov351y
Как видите, два поля с текстом внутри закрываются, а одно без текста — нет. Кто-нибудь знает, в чем может быть дело?
Ответы 1
Поправьте меня, если я ошибаюсь, но из того, что я вижу, вы переходите с помощью flex-basis. Если вы измените основу гибкости вручную, вы увидите, что кнопка даже не изменяет размер.
Я думаю, это связано с тем, что flex не хочет уменьшать размер контейнера по сравнению с содержимым.
Я думаю, вы сможете исправить это, если найдете негибкий способ изменить размер кнопки. Я попытался вручную изменить ширину кнопки напрямую, и у меня была нормальная реакция.
Надеюсь, это поможет!
Редактировать: я немного погуглил об этом, и гибкие элементы имеют минимальную ширину и минимальную высоту автоматически, которые вы должны иметь возможность перезаписать.
Почему гибкие элементы не уменьшаются за размер содержимого?
Ответ stackoverflow, на который вы ссылаетесь, содержит ответ. Flex-элементы имеют два свойства min-width и min-height, для которых по умолчанию установлено значение auto. Переопределить, установив их на 0