Анимация div'ов с остановкой временно прекращается при попадании в текстовое содержимое.

Question

Я пытаюсь удалить кнопку с анимацией на клике.Анимация запускается, но как только она попадает в текстовое содержимое внутри кнопки, анимация сильно замедляется.

Я сделал код и окно, чтобы показать проблему: https://codesandbox.io/s/9y1pov351y

Как вы можете видетьдва поля с текстом внутри останавливаются, а одно без текста - нет.Кто-нибудь знает, в чем может быть проблема?

Answer 1

Поправьте меня, если я ошибаюсь, но из того, что я вижу, вы переходите с flex-basis. Если вы измените гибкую основу вручную, вы увидите, что кнопка даже не меняет размер.Я думаю, это происходит из-за того, что flex не хочет определять размер контейнера меньше, чем содержимое.

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

Надеюсь, это поможет!

Редактировать: я немного погуглил об этом, и у гибких элементов есть минимумширина и минимальная высота авто, которые вы должны иметь возможность перезаписать.

Почему гибкие элементы не уменьшаются до размера контента?