动画 flex 过渡

Question

所以我不相信这已经在其他地方得到了回答。我一直在查看 CSS 技巧以及http://n12v.com/css-transition-to-from-auto/，但不确定以下是否可行。

我想要做的是动画一个 flex 孩子，如果它改变了宽度。这种宽度变化可以从孩子本身内部触发。下面是一些示例代码：

.container {
  width: 600px;
  display: flex;
}

.flexy {
  transition: all 10s;
  max-width: 500px;
}

<div class="container">
  <div class="flexy" style="background-color:red;">This is some random text</div>
  <div class="flexy" style="background-color:green;">
    <div style="width:300px">Resize this to animate?</div>
  </div>
  <div class="flexy" style="background-color:blue;">This is some more random text</div>
</div>

所以我想要的是 flexy box 根据它们的大小设置动画，最重要的是，如果（在说 firebug 中）你将 300px 宽度更改为 500px，我希望 flexy parent（300px div）也设置动画。这甚至可能吗？

Answer 1

如果我理解正确，您希望绿色 div 为“宽度”的变化设置动画。

正如您所说，您不能对/从auto进行动画制作，但您可以从一个已定义的值设置为另一个动画。

在这种情况下，我们可以利用flex-basis而不是width

.container {
  width: 600px;
  display: flex;
  margin: 1em auto;
}

.container>div {
  transition: all 2s;
}

.flexy {
  transition: all 2s;
  flex: 0 0 300px;
  background: green;
}

.flexy:hover {
  flex: 0 0 500px;
}

<div class="container">
  <div class="" style="background-color:red;">This is some random text</div>
  <div class="flexy">
    <div style="">Resize this to animate?</div>
  </div>
  <div class="" style="background-color:blue;">This is some more random text</div>
</div>