FxCollapseTransition 折叠过渡

FxCollapseTransition 属于 @fx/components，不依赖任何 UI 框架。被 FxCollapse / FxTree 等组件内部复用，也可单独用于任意需要展开/收起过渡的内容。

基于 max-height + requestAnimationFrame 实现高度自适应的展开/收起过渡：无需提前知道内容高度，过渡过程中内容高度变化（如动态增删行）也会被正确计算。过渡时长由 @fx/styles 全局样式（.fx-collapse-transition-enter-active / -leave-active）提供。

基础用法

用 v-show（或 v-if）控制子节点显隐，外层包一个 FxCollapseTransition 即可获得平滑的高度过渡。

<template>
  <FxBtn @click="show = !show">{{ show ? "收起" : "展开" }}</FxBtn>
  <FxCollapseTransition>
    <div v-show="show" class="collapse-content">
      <p>这是被 FxCollapseTransition 包裹的内容。</p>
      <p>展开 / 收起时高度自适应过渡，无需固定高度。</p>
      <p>
        点击下方按钮可在展开态动态增删行，过渡会按当前实际高度重新计算。
      </p>
      <div class="collapse-content__actions">
        <FxBtn size="small" @click="lines.push(lines.length + 1)">
          追加一行
        </FxBtn>
        <FxBtn size="small" :disabled="!lines.length" @click="lines.pop()">
          移除一行
        </FxBtn>
      </div>
      <p v-for="line in lines" :key="line">动态行 #{{ line }}</p>
    </div>
  </FxCollapseTransition>
</template>

<script setup lang="ts">
import { ref } from "vue"

const show = ref(true)
const lines = ref<number[]>([])
</script>

<style scoped>
.collapse-content {
  margin-top: 12px;
  padding: 16px;
  border-radius: 4px;
  background-color: var(--fx-fill-color-light);
  color: var(--fx-text-color-regular);
}

.collapse-content p {
  margin: 0 0 8px;
}

.collapse-content__actions {
  display: flex;
  gap: 8px;
  margin-bottom: 8px;
}
</style>

TIP

子节点应当是单个根元素。过渡通过读取该元素的 scrollHeight 计算目标高度，因此内容高度可任意变化。

API

Attributes

无。FxCollapseTransition 是纯过渡包裹组件，不接受任何属性。

Slots

插槽名	说明	类型
default	需要应用展开/收起过渡的内容（建议为单个根元素，配合 v-show 控制显隐）	—

局部引入

import { FxCollapseTransition } from "@fx/components"

<script setup lang="ts">
import { ref } from "vue"
import { FxCollapseTransition } from "@fx/components"

const show = ref(true)
</script>

<template>
  <FxCollapseTransition>
    <div v-show="show">展开 / 收起的内容</div>
  </FxCollapseTransition>
</template>

注意事项

• 必须引入 @fx/styles 的全局样式，过渡时长类（.fx-collapse-transition-enter-active 等）才能生效。
• 子节点用 v-show 比 v-if 更合适：v-show 仅切换显隐、节点始终在 DOM 中，过渡钩子能稳定读取 scrollHeight；v-if 在首次渲染时元素尚未挂载，可能出现无过渡的情况。
• 同一实例在快速 open→close→open 切换时会自动取消上一个未触发的 requestAnimationFrame，避免重复回调导致闪烁。