Svelte中实现卡片原地淡入淡出切换的方法

核心要点 #

要实现两个同位置卡片无缝淡入淡出替换，关键是让俩卡片一直叠在同一个位置，别因为切换时DOM被删除重建导致位置跑偏，同时用Svelte的过渡动画让淡入淡出同步进行。

具体实现方法 #

1. 先把布局固定死 #

给外层容器设置相对定位，两个卡片都设绝对定位，确保它们完全重叠：

<div class="card-wrap">
  <!-- 卡片内容容器 -->
</div>

对应CSS：

.card-wrap {
  position: relative;
  width: 300px;
  height: 200px; /* 尺寸要和卡片一致 */
}
.card {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  /* 自定义样式：背景、圆角、阴影等 */
}

2. 用Svelte过渡实现同步淡换 #

导入Svelte自带的fade过渡，控制卡片的显示状态：

<script>
  import { fade } from 'svelte/transition';
  let showCard1 = true;

  function swapCards() {
    showCard1 = !showCard1;
  }
</script>

<button on:click={swapCards}>切换卡片</button>

<div class="card-wrap">
  <!-- 方案一：用{#if}配合过渡 -->
  {#if showCard1}
    <div class="card" transition:fade={{ duration: 300 }}>卡片1内容</div>
  {:else}
    <div class="card" transition:fade={{ duration: 300 }}>卡片2内容</div>
  {/if}
</div>

3. 解决卡片偏移问题 #

如果之前用{#if}出现新卡片从下方弹出的情况，是因为切换时旧卡片先消失、新卡片才插入DOM导致布局闪跳。可以改用让两个卡片始终留在DOM里，只控制透明度的方案：

<div class="card-wrap">
  <div 
    class="card" 
    transition:fade={{ duration: 300 }}
    style="opacity: {showCard1 ? 1 : 0}"
  >卡片1内容</div>
  <div 
    class="card" 
    transition:fade={{ duration: 300 }}
    style="opacity: {showCard1 ? 0 : 1}"
  >卡片2内容</div>
</div>

这种方式下两个卡片始终重叠在同一位置，完全避免位移问题。

避坑提醒 #

• 两个卡片的尺寸必须完全一致，否则重叠时会错位
• 过渡时长要统一设置，保证淡出和淡入同步进行
• 避免切换时让卡片被移出DOM，要么用{#key}强制重建但保持定位，要么让卡片始终留在DOM中通过透明度控制显示

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