使用动画让flexbox从"auto"变化

Question

3

我正在尝试将一个Flexbox从“自动”状态动画化，其中大多数内容都是自动调整大小的，转换为一个给定大小的状态。

|auto|this fills most space          |auto|

to

|auto|this...|auto                        |

当你悬停时，你会看到我想要的效果。如果在 CSS 中删除注释：

li
  // flex 1

你会发现它现在可以动画，但尺寸不是我想要的。

问题是我无法弄清楚如何在第一状态下存在 flex 属性，并且我也无法在第二种状态下找到答案。因此，我无法在两者之间进行动画。

- user578895

1

我不知道有什么东西可以让你在CSS中从auto到其他状态进行动画...无论是使用flexbox还是不使用。 - Paulie_D

从你的Codepen中我可以看出你已经自己解决了这个问题。由于Codepen有自动保存功能，所以它们通常不适合在Stackoverflow上使用。 - Persijn

@Persijn -- 嗯，我有点解决了。如果我手动指定宽度，那就没问题了。但是我不想指定宽度。 - user578895

1个回答

网页内容由stack overflow 提供, 点击上面的

可以查看英文原文，
原文链接

- Persijn · Accepted Answer

Flex属性的文档如下：

flex | none | [<‘flex-grow’> <‘flex-shrink’>? || <‘flex-basis’>]

其中flex-basis是：

flex-basis | content | <‘width’>，初始值为auto；

flex-basis是否可动画？

可动画：与宽度相同；

因此，根据规范，此属性仅作为宽度进行动画处理。

自动与其内容相同。此属性不可动画。