高度变化,使用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'); } });