Question

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

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

＆＃13;

.container {
  width: 600px;
  display: flex;
}

.flexy {
  transition: all 10s;
  max-width: 500px;
}

＆＃13;

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

＆＃13;

所以我想要的是灵活的盒子来设置它们的大小和最重要的是如果（比如说firebug）你将300px的宽度更改为500px我想要的是flexy parent（300px div））也动画。这甚至可能吗？

Answer 1

如果我理解正确，你希望Green 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>

动画弹性过渡

1 个答案: