css动画height为auto无法触发transition

使用max-height属性来进行代替（有一定缺陷）

原理:通过一个过大的maxHeight来渐变

这里是vue的style写法

:style="{height: groupExpandFlag ? 'auto': '60px', maxHeight: groupExpandFlag ? '500px': '60px', transition: 'max-height .3s ease-in'}"

当子元素的高度固定时，这里可以使用另外一种办法

这里是vue的html

<div :style="{height: groupExpandFlag ? groupAutoHeight: '60px', transition: 'height .3s ease-in'}">
<!-- 这里的10可以是任意数 -->
    <div v-for="item in 10"></div>
</div>

这里是vue的js

this.$nextTick(() => {
            const nodes = document.querySelectorAll('.whag-item') // 这里是子元素的类名
          if (nodes[nodes.length - 1].offsetTop >= 60) {
            this.groupMoreToggle = true  //这里是我业务需要是否显示控制切换的按钮
          }
// 通过offsetTop获取距离父元素的高度(最近一个postion非static的父元素(设置relative或absolute或fixed))
          this.groupAutoHeight = (60 + nodes[nodes.length - 1].offsetTop) + 'px'
          console.log(nodes[nodes.length - 1].offsetTop)
        })