изменить встроенный блок высоту контейнера гладкой

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); в вашей функции.

EDIT: и, конечно, $('.b').slideDown(400);, чтобы вернуть его.

Answer 2

U можно использовать Jquery.animate

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

Btw если и хотят щ отражающую или что-то использовать: для анимации качели/отказов и т.д., или нет. https://jqueryui.com/

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