element的select下拉框过多折叠显示

Question

问题遇到的现象和发生背景

默认就显示这些,如果点击查询更多就展示下面的

      <div :style="{height: checked?'88px':'44px', transition: 'all 0.3s linear';}"></div>

这样的写是可以折叠显示并且有过度动画的.但是问题来了,这个高度写死的话只能满足这些折叠的下拉框只有两行.
如果下拉框的个数有三行怎么办,高度就不是88px了
如果height: checked?'':'44px', 这样写,可以满足下拉框不论多少行都可以.但是,动画效果没了,也不行.

问题:
1,可以满足多行下拉框的折叠
2,折叠展开和收起有过度动画.

问题相关代码，请勿粘贴截图

运行结果及报错内容

我的解答思路和尝试过的方法

我想要达到的结果

Answer 1

//一行
.minSty{
  height:44px;
  min-height:44px;
  max-height:44px;
  transition: all 0.4s linear;
}
//多行
.maxSty{
  height:auto;
  min-height:88px;
  max-height:178px;
  transition: all 1s linear;
}

Answer 2

我的思路是这样，动画效果还是原样，按钮点击加载更多，用v-if控制