动画 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>

所以我想要的是灵活的盒子动画到它们的大小和最重要的是如果（比如说萤火虫）你将 300px 宽度更改为 500px 我想要 flexy 父级（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>