含自定义元素的Svelte页面平滑过渡实现方案咨询

核心思路是确保自定义元素完全初始化并渲染出真实高度后，再启动过渡动画，以下是几种可行方案：

方案1：监听自定义元素的初始化完成事件 #

如果自定义元素是你自己开发的，在元素内部完成渲染、高度确定后派发一个自定义事件，父组件监听该事件后再触发过渡：

1. 自定义元素（如CustomSelect）内添加初始化完成事件：

// 在CustomSelect的脚本中，渲染完成后执行
dispatchEvent(new CustomEvent('initialized'));

2. 父组件中控制过渡触发时机：

<script>
  let showPage2 = false;
  let isReady = false;
  let customSelect;

  function switchPage() {
    showPage2 = true;
    customSelect?.addEventListener('initialized', () => {
      isReady = true;
    });
  }
</script>

{#if showPage2}
  <div transition:slide|local={{ duration: 500 }} class="page" style="opacity: {isReady ? 1 : 0}">
    <CustomSelect bind:this={customSelect} />
  </div>
{/if}

通过isReady变量控制过渡启动时机，确保Svelte能获取自定义元素的真实高度计算动画。

方案2：用requestAnimationFrame等待布局稳定 #

如果无法修改自定义元素（比如第三方组件），在tick()后再等待一帧，让浏览器完成布局计算：

<script>
  import { tick } from 'svelte';
  let showPage2 = false;
  let isReady = false;

  async function switchPage() {
    showPage2 = true;
    await tick();
    // 等待浏览器完成当前帧的布局渲染
    requestAnimationFrame(() => {
      isReady = true;
    });
  }
</script>

{#if showPage2}
  <div transition:slide|local={{ duration: 500 }} class="page" style="display: {isReady ? 'block' : 'none'}">
    <CustomSelect />
  </div>
{/if}

先让元素渲染但不可见，布局稳定后再显示并启动过渡，避免高度计算偏差。

方案3：预计算自定义元素高度（适用于高度可预测场景） #

如果自定义元素的高度可通过逻辑提前计算（比如基于选项数量），过渡前直接设置高度：

<script>
  let showPage2 = false;
  let options = ['选项1', '选项2', '选项3'];
  // 提前计算预期高度（示例值，根据实际组件调整）
  let selectHeight = 40 + options.length * 30;

  async function switchPage() {
    showPage2 = true;
    await tick();
  }
</script>

{#if showPage2}
  <div transition:slide|local={{ duration: 500 }} class="page">
    <CustomSelect style="height: {selectHeight}px" />
  </div>
{/if}

关键注意事项 #

• 过渡元素添加local修饰符，确保切换时DOM节点不会被立即销毁，保留到过渡完成
• 优先使用自定义元素的初始化事件，这是最可靠的高度同步方式
• 避免在元素未完成布局时启动过渡，否则Svelte会基于初始占位高度计算动画，导致后续跳转

内容的提问来源于stack exchange，提问作者frboud