Question

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

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

如果max-height减小（例如300px到150px），则转换不起作用。

如果max-height增加（例如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中max-height值为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

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

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

当元素减少时，如果首先删除元素，那么高度将首先减少，而不是动画，然后，当您设置新的max-height时，它仅仅在新{{{{{{{{{ 1}}小于减小的高度。如果新的max-height仍然大于降低的高度，则动画根本不会出现。

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

＆＃13;

max-height

＆＃13;

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();
});

＆＃13;

.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;
     }
}

＆＃13;

最大高度过渡问题

2 个答案: