元素高度变化使用动画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:;
overflow: hidden;
}
&:hover .content{
max-height: var(--max-height);
}
}

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