user1575921 user1575921 - 5 months ago 15
CSS Question

change inline-block container height smooth

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

.a and .b are inline-block with different height in a container
after click

.a
,

.a
expand width to 100%,
.b
height to 0, that means container only can see
.a
and container height will change to
.a
height.

my problem is how to make the container height change not look like flash, bounce .... make it smooth ... ?

I tried to add transition in container too but not work, I think because I don't set container height, but I don't want to set container height.



$('.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

If I understand your question correctly, you could add $('.b').slideUp(400); in your function.

EDIT: and, of course $('.b').slideDown(400); to bring it back down.

Comments