元素高度变化使用动画transition

高度变化，使用transition，没有效果，可以使用max-height替换。

思路：

初始元素max-height:0; 不显示，父元素hover时，重新设置元素的max-height的值，

可以通过el.scrollHeight获取元素的真实高度。

demo:

 <div class='demo'>
          <div> this is demo</div>
          <div class='content' v-hoverAutoHeight>
              this is content;this is content;this is content;
              this is content;this is content;this is content;this is content;
          </div>
      </div>

css:

.demo{
     .content{
        transition: max-height 1s;
        max-height: 0;
        overflow: hidden;
  }
    &:hover .content{
        max-height: var(--max-height);
     }
 }

js

Vue.directive('hoverAutoHeight', {
    inserted(el, binding) {
        let maxHeight = el.scrollHeight;
        console.log(maxHeight);
        el.style.setProperty('--max-height', maxHeight + 'px');
    }

});