元素高度變化使用動畫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');
    }

});