Bootstrap 3 smooth harmonic transitions

Question

I use the Bootstrap 3 accordion. Everything works fine, except that the transition is not smooth. It's like jumping jumps. How can a smooth transition be achieved?

HTML

<div class="panel" id="<?php echo $id; ?>"> <div class="panel-title"><?php the_title(); ?></div> <div id="collapse-<?php echo $id; ?>" class="panel-collapse collapse" style="overflow:hidden; display: block;"> <div class="panel-body"><?php the_content(); ?></div> </div> <a data-toggle="collapse" data-parent="#accordion" href="#collapse-<?php echo $id; ?>" class="collapsed read_more" id="btn-collapse-<?php echo $id; ?>">Read More &raquo;</a> </div> 

Js

 $('.panel-collapse').on('shown.bs.collapse', function () { var collapse_id = $( this ).attr("id"); $(".panel > #btn-"+collapse_id).text("Close"); }); $('.panel-collapse').on('hidden.bs.collapse', function () { var collapse_id = $( this ).attr("id"); $(".panel > #btn-"+collapse_id).text("Read More"); }); 

I did everything as on the official site .

What I tried:

This tranisiton CSS for class folding

 .panel .collapsing{ height: 100px !important; -moz-transition : height 5s; -webkit-transition : height 5s; -o-transition : height 5s; transition : height 5s; } 

Answer 1

Just transition upgrade should work

 .collapsing { transition: height 0.6s; } 

Answer 2

Bouncing slide effects often cause ambiguous height calculations. Try .panel-body height to .panel-body , even if it's 100%.

If this does not work, give it an explicit width.

Answer 3

Animate the maximum height.

If you set your container to max-height: XXpx; as default and use CSS transitions to animate max-height to a number greater than your default value and greater than your container / text height, it will work like a charm.