切 tab 时容器高度也做过渡
三个 tab 的成员数不同,内容淡切时高度直接跳。复用换入站那套锁高度、 量目标、过渡、交还的钩子,挂到 tab 的 Transition 上;tab 切换仍然不触发 自动滚动。
This commit is contained in:
@@ -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">
|
||||||
|
|||||||
Reference in New Issue
Block a user