Изменить высоту контейнера inline-block ровно

Question

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

.a и.b - встроенный блок с различной высотой в контейнере после клика .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); вернуть его обратно.

Answer 2

Вы можете использовать Jquery.animate

$( "#a" ).click(function() {
    $( "#b" ).animate({
        height: "100%"
      }, 1000, function() {
        // Animation complete you can do something here aswell.
      });
    });

Кстати, если вы хотите, чтобы пользовательский интерфейс подпрыгивал или что-то использовалось: для анимации свинга / отказов и т. Д. Или нет https://jqueryui.com/

Это объяснит, почему вы должны использовать его или нет;) https://www.google.com/design/spec/motion/material-motion.html