javascript - 最大高度过渡问题

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