css - 从 "auto"动画 flexbox

Question

我正在尝试将 flexbox 从大多数事物自动调整大小的“自动”状态设置为其中一个事物调整大小的状态。

|auto|this fills most space          |auto|

to

|auto|this...|auto                        |

演示:http://codepen.io/kaaaahhhhnnnn/pen/vOJpwo

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

li
  // flex 1

您会看到它现在具有动画效果，但尺寸不是我想要的。

问题是我无法弄清楚如何在存在 flex 属性的情况下获得第一个状态，如果没有它我也无法弄清楚如何获得第二个状态。所以我无法在两者之间设置动画。

Answer 1

关于 flex 的文档简写是

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

哪里flex-basis是:

flex-basis | content | <‘width’> and the initial value : auto;

flex-basis 是否可以设置动画？

Animatable: as width

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

Auto 与其内容相同。此属性不可设置动画。

Flex-box w3 specs