css - 当它击中文本内容时，动画 div 会暂时停止

Question

我正在尝试删除带有 onClick 动画的按钮。动画开始了，但是一旦它碰到按钮内的文本内容，动画就会减慢很多。

我制作了 codesandbox 来显示这个问题: https://codesandbox.io/s/9y1pov351y

如您所见，两个带有文本的框停止了，但没有文本的框没有。任何人都知道问题可能是什么？

Answer 1

如果我错了请纠正我，但据我所知，您正在使用 flex-basis 进行转换，如果您手动更改 flex basis，您会看到按钮甚至没有调整大小。我认为这是因为 flex 不希望容器的大小小于内容。

如果您找到一种非 flex 方式来调整按钮大小，我认为您应该能够解决这个问题。我尝试直接手动更改按钮的宽度，并且 react 正常。

希望对您有所帮助!

编辑:我在谷歌上搜索了一下， flex 元素有自动的最小宽度和最小高度，你应该可以覆盖它。

Why don't flex items shrink past content size?