切 tab 时容器高度也做过渡

三个 tab 的成员数不同,内容淡切时高度直接跳。复用换入站那套锁高度、
量目标、过渡、交还的钩子,挂到 tab 的 Transition 上;tab 切换仍然不触发
自动滚动。
This commit is contained in:
2026-08-11 17:08:33 +08:00
parent 58d317afce
commit 4e504e9003
+3 -2
View File
@@ -146,7 +146,7 @@ function revealBottom() {
} }
/** /**
* 切换选中的入站时,内容淡出淡入,容器高度从旧值滑到新值。 * 内容 out-in 切换(换入站、切 tab 共用)时,容器高度从旧值滑到新值。
* 高度过渡没法纯 CSS 做:auto 不可插值。所以离开前把当前高度钉住, * 高度过渡没法纯 CSS 做:auto 不可插值。所以离开前把当前高度钉住,
* 新内容进场时量出目标高度、过渡过去,结束后清掉内联样式让内容重新做主。 * 新内容进场时量出目标高度、过渡过去,结束后清掉内联样式让内容重新做主。
*/ */
@@ -492,7 +492,8 @@ const complete = computed(
</button> </button>
<span class="ink" :style="ink"></span> <span class="ink" :style="ink"></span>
</div> </div>
<Transition name="pane" mode="out-in"> <!-- 复用入站切换的高度钩子:三个 tab 的成员数不同,高度直接跳很突兀 -->
<Transition name="pane" mode="out-in" @before-leave="lockHeight" @enter="settleHeight">
<div :key="activeTab"> <div :key="activeTab">
<p v-if="!kernel.online" class="hint"><IconOffline /> 内核未连接</p> <p v-if="!kernel.online" class="hint"><IconOffline /> 内核未连接</p>
<p v-else-if="!proxyDraft && proxyLines.length === 0" class="hint"> <p v-else-if="!proxyDraft && proxyLines.length === 0" class="hint">