最大高度过渡问题

Question

I make autocomplete Max-height set from JavaScript:

if (data.length < 10) 
    element.css({'max-height': (30 * newVal.length) + 'px'})

If max-height decreases(eg 300px to 150px), transition does not work.

If max-height increases(eg 150px to 300px), transition works.

.autocomplete-ion {
 background-color: gray;
 position: absolute;
 width: 90%;
 left: 5%;
 top:45px;
 overflow-y: auto;
 z-index: 10000000;
 background-color: #FAFAFA;
 transition: 0.8s;
 max-height: 300px;
 box-shadow: 0 3px 1px -2px rgba(0,0,0,.14),0 2px 2px 0 rgba(0,0,0,.098),0 1px 5px 0 rgba(0,0,0,.084);
 ul li {
   padding:5px;
 }
}

Answer 1

It is because you have max-height value as 300px in your css. So you should remove that to work properly

.autocomplete-ion {
 background-color: gray;
 position: absolute;
 width: 90%;
 left: 5%;
 top:45px;
 overflow-y: auto;
 z-index: 10000000;
 background-color: #FAFAFA;
 transition: 0.8s;
 box-shadow: 0 3px 1px -2px rgba(0,0,0,.14),0 2px 2px 0 rgba(0,0,0,.098),0 1px 5px 0 rgba(0,0,0,.084);
 ul li {
   padding:5px;
 }

Answer 2

Because the height change from element add/remove will not cause a animation.

When elements increasing, the new height is likely to always larger than previous max-height , so when you set a higher max-height , the animation appears from old max-height to new one.

When elements decreasing, if you remove the elements first, then the height will decrease first, without animation, then, when you set the new max-height , it'll only animate part only if new max-height is smaller than decreased height. And if the new max-height is still larger than decreased height, the animation not appears at all.

So you have to first set to the new max-height when new elements is less then old ones, to trigger animation, and set the list to new one(either by removing or create a new list) when animation ends.

 var list = $(".autocomplete-ion ul"); var tryAppend = function(newList) { var curList = $(".autocomplete-ion ul li"); var curLength = curList.length; var newLength = newList.length; if (newLength <= 10) { // If its adding, no need to listen to animation, as the new height will be definetly larger. // Otherwise, if (newLength < curLength) { $(".autocomplete-ion").on("transitionend webkitTransitionEnd oTransitionEnd MSTransitionEnd", function() { list.empty().append(newList); $(this).off(); }); $(".autocomplete-ion").css({'max-height': (30 * newLength) + 'px'}); } else { $(".autocomplete-ion").css({'max-height': (30 * newLength) + 'px'}); list.empty().append(newList); } } }; var create = function(num) { var list =[]; var i, li; for (i = 0; i < num; ++i ) { li = $("<li>").text("Test li " + (i + 1)); list.push(li); } tryAppend(list); }; $(".cl").click(function() { var counts = parseInt($(this).data("len"), 10); create(counts); }); $(".clear").click(function() { list.empty(); }); 

 .autocomplete-ion { background-color: gray; position: absolute; width: 90%; left: 5%; top:45px; overflow-y: auto; z-index: 10000000; background-color: #FAFAFA; transition: 0.8s; max-height: 0px; box-shadow: 0 3px 1px -2px rgba(0,0,0,.14),0 2px 2px 0 rgba(0,0,0,.098),0 1px 5px 0 rgba(0,0,0,.084); ul li { height: 40px; padding:5px; } } 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.0/jquery.min.js"></script> <div class="autocomplete-ion"> <ul> </ul> </div> <button class="cl" data-len="1">1</button> <button class="cl" data-len="5">5</button> <button class="cl" data-len="10">10</button>