javascript - 平滑更改内联 block 容器高度

Question

https://jsfiddle.net/4a64jso1/1/

.a 和 .b 是容器中具有不同高度的行内 block 点击.a后，
.a 展开宽度为100%，.b 高度为0，即容器只能看到.a，容器高度变为.a 高度。

我的问题是如何让容器高度变化看起来不像闪光、弹跳....让它平滑...？
我也尝试在容器中添加过渡但没有用，我想是因为我没有设置容器高度，但我不想设置容器高度。

$('.a').on('click', function() {
  $('.container').addClass('expand');
})
$('.back').on('click', function() {
  $('.container').removeClass('expand');
})

.container {
  width: 400px;
  overflow: hidden;
  font-size: 0;
  white-space: nowrap;
}
.container >div {
  display: inline-block;
  vertical-align: top;
  font-size: 12px;
}
.a {
  width: 200px;
  height: 100px;
  background-color: blue;
  -webkit-transition: width 0.45s;
  transition: width 0.45s;
}
.b {
  width: 200px;
  height: 1000px;
  max-height: 99999px;
  background-color: red;
  -webkit-transition: max-height 0.45s;
  transition: max-height 0.45s;
}
.container.expand .a {
  width: 100%;
}
.container.expand .b {
  max-height: 0;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
<div class="back">back</div>
<div class="container">
  <div class="a">a</div>
  <div class="b">b</div>
</div>
<div class="other">other</div>

Answer 1

如果我正确理解你的问题，你可以在你的函数中添加 $('.b').slideUp(400);。

编辑:当然还有 $('.b').slideDown(400); 将其放回原处。