最大高度转换问题

Question

我自动完成JavaScript设置的最大高度：

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

如果最大高度降低（例如300px到150px），则转换不起作用。

如果最大高度增加（例如150px到300px），则过渡有效。

.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

这是因为css中的最大高度值为300px。所以你应该删除它才能正常工作

.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

因为从element添加/删除height不会导致动画。

当元素增加时，新的height可能总是比以前的max-height大，因此当设置更高的max-height时，动画将从旧的max-height显示为新的。

当元素减少时，如果首先移除元素，则高度将首先减少，而不进行动画处理，然后，当设置新的max-height时，仅当新的max-height小于减少的高度时，才会对部分进行动画处理。如果新的max-height仍然大于减小的高度，则根本不会显示动画。

因此，当新元素少于旧元素时，必须首先设置为新的max-height，以触发动画，并在动画结束时将列表设置为新列表（通过移除或创建新列表）。

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>