对于高度不确定，想要有过渡效果的解决方法

之前写过一篇文章，对于高度不确定，想要使用transition使高度有过渡效果，解决方法如下_尹东的博客-CSDN博客_transition 高度先看效果图：从效果图上可以看出，该折叠层包含两层；所有分类可以折叠，里面的分类分级，渠道品牌，品牌，产业还可以折叠；只有外层有高度过渡效果，内层没有；两层折叠的时候 ，其实我并没有完美解决好内层的过渡效果；初始状态是外层是展开的，内层是折叠的；内层终止高度不确定，才会出现内层没有过渡效果；如果内层也是展开的，则可以完美解决；先以外层有过渡，内层无过渡的情况来说明思路：初始时，外...https://blog.csdn.net/yinge0508/article/details/104634851

说的是对于两层嵌套，高度都不确定 ，内容有待优化，最近又遇到了此类问题，就是对于高度不确定，想要使用transition，使元素有过渡效果，方法主要就是  使用的 scrollHeight, 然后通过js设置元素高度；

代码：

<div class="shortcut"></div>
<el-button @click="changeUpDown">按钮</el-button>

changeUpDown() {
      var el = document.querySelector('.shortcut');
      var height = el.scrollHeight;
      if(!this.upDown){
        el.style.setProperty('height', height + 'px');
      } else {
        el.style.setProperty('height', 282 + 'px'); // 这里我的默认高度 282px
      }
    },

.shortcut {
  transition: all 1s;
  height: 282px;
  overflow: hidden;
}