从左侧滑入宽度：自动

Question

我使用弹性框实现工具栏，并希望通过从左侧平滑滑动显示可选部分。

一开始，条形图看起来好像新元素不存在，最后就像动画永远不会发生一样

动画0% { margin-left: -<width> }完全符合预期，但仅限于此时已知元素的宽度;我需要它使用width: auto（即未设置的宽度）或其他非长度，如弯曲时。

＆＃13;

＆＃13;

@keyframes appear {
  0% { margin-left: -30ch; }
}
div.a {
  width: 30ch; /* << should work without that */
  flex: none; /* << stretch: should work with flex */
  animation: appear 1s ease-in-out infinite alternate;
}

.root {
  margin: 10px;
  border: 1px solid black;
  display: flex;
  overflow: hidden;
}
.a, .b, .c {
  box-sizing: border-box;
  padding: 5px;
  flex: 1;
}
.b { flex: 2 }
.a { background: #88f }
.b { background: #8d8 }
.c { background: #f88 }

＆＃13;

<div class="root">
  <div class="a">Some new stuff</div>
  <div class="b">Hello</div>
  <div class="c">World</div>
</div>

<div class="root">
  <div class="a">Some longer content sliding in</div>
  <div class="b">Hello</div>
  <div class="c">World</div>
</div>

＆＃13;

＆＃13;

＆＃13;

Answer 1

Width:auto;不可动画。使用max-width:1000px;或大于宽度的东西。所以代码是：

 width:auto;
 max-width:1000px;