实现div的高度由0到auto的过渡变化

如果你想要实现height：0 到 height：auto的过渡效果，直接用height+tansition，你会发现没有过渡效果，下面的方法会让你快速实现过渡效果，原理是获取子元素的真实高度，赋值给父元素的max-height。
css 部分（menu-item-active是激活状态，默认高度是0，激活状态下是auto）：

.menu-item {
  max-height: 0;
  transition: max-height 0.15s ease-out;
  overflow: hidden;
}
.menu-item.menu-item-active {
  transition: max-height 0.25s ease-in;
}

JS部分：

/**
 * 高度动画函数
 * element 是需要改变高度的dom对象
 * isChange 是在点击内部节点执行动画时才有，这时候需要更新element的高度
 */
private funTransitionHeight (element, isChange?) {
  if (element) {
    const childEle = element.children[0];
    const height = window.getComputedStyle(childEle).height;
    if (isChange) {
      childEle.addEventListener('transitionend', (e) => {
        (element as any).style.maxHeight = window.getComputedStyle(childEle).height;
      }, false);
      return
    }
    if ((element as any).style.maxHeight === '' || (element as any).style.maxHeight === '0px') {
      (element as any).style.maxHeight = height;
    } else {
      (element as any).style.maxHeight = '0px';
    }
  }
}

用到的是window.getComputedStyle(childEle).height这个方法，正常情况下，这样就已经可以了。

但是，细心的同学会发现，max-height设置好了之后，并不是auto，这并没有完全满足诉求。假如你的element里有css3动画，会导致获取的高度不对（写在异步函数里也不行的）。

可以通过监听dom的transitionend事件，当动画完成之后再去获取高度即可。
效果：