自适应高度（height: auto和flex: 1）过渡动画方案

本文主要是介绍自适应高度（height: auto和flex: 1）过渡动画方案，希望对大家解决编程问题提供一定的参考价值，需要的开发者们随着小编来一起学习吧！

directive/transitioning.js

/* 实验性声明： v-transitioning 不可与v-for一起使用，会导致真实高度计算错误*/function getRealHeight(myDiv) {let parentNode = myDiv.parentNode || document.body;let content = myDiv.cloneNode(true);content.style.height = 'auto';content.style.visibility = 'hidden';parentNode.appendChild(content);let height = content.offsetHeight;parentNode.removeChild(content);return height;
}const transitioningObj = {mounted(el, binding) {const { isTrigger } = binding.value;const triggerFlag = computed(isTrigger);function init() {el.style.height = `${el.clientHeight}px`;el.classList.add('height-transitioning');}nextTick(init);const handleContentChange = () => {nextTick(() => {if (!el.classList.contains('height-transitioning')) {el.classList.add('height-transitioning');}el.style.height = `${getRealHeight(el)}px`;});};const unWatch = watch(() => triggerFlag.value, handleContentChange);onBeforeUnmount(unWatch);}
};export default (app) => {app.directive('transitioning', transitioningObj);
};

index.scss

.height-transitioning {overflow-y: hidden;transition: height .5s;
}

main.js

import vTransitioning from '@/directive/transitioning';const app = createApp(App);
vTransitioning(app);

use:

<div class="itemBox" v-transitioning="{ isTrigger: () => expandIdx === index }">
</div>

这篇关于自适应高度（height: auto和flex: 1）过渡动画方案的文章就介绍到这儿，希望我们推荐的文章对编程师们有所帮助！

---