Svelte 5动态内容容器高度动画实现及模块用法咨询

实现容器高度平滑变化 #

要实现内容增删时容器高度的动画，不需要手动用tweened计算，直接用svelte/transitions的slide过渡就能搞定，它会自动检测容器高度变化并生成平滑动画：

<script>
  import { slide } from 'svelte/transitions';
  let items = [];
  let count = 0;

  const addItem = () => items.push(`Item ${++count}`);
  const removeItem = () => items.length && items.pop();
</script>

<button on:click={addItem}>添加元素</button>
<button on:click={removeItem}>移除元素</button>

<div transition:slide={{ duration: 300 }} class="container">
  {#each items as item}
    <div class="item">{item}</div>
  {/each}
</div>

<style>
  .container {
    border: 1px solid #eee;
    padding: 10px;
  }
  .item {
    padding: 8px;
    margin: 4px 0;
    background: #f5f5f5;
  }
</style>

如果slide的默认效果不符合需求，也可以自定义高度过渡函数，精确控制动画过程：

<script>
  import { transition } from 'svelte/transitions';

  const heightTransition = (node, { duration = 300 }) => {
    const startHeight = getComputedStyle(node).height;
    return {
      duration,
      css: t => `height: ${parseFloat(startHeight) * t}px;`
    };
  };

  // 同上面的items和操作函数
</script>

<div transition:heightTransition class="container">
  {#each items as item}
    <div class="item">{item}</div>
  {/each}
</div>

svelte/transitions 与 svelte/animate 的用法及适用场景 #

svelte/transitions（过渡模块）

• 核心功能：处理单个元素的入场/退场动画，包括尺寸变化、显隐过渡等。
• 适用场景：
  • 元素从DOM中添加/移除时的过渡（比如模态框弹出、单个列表项的显隐）。
  • 容器尺寸（高度/宽度）变化的平滑过渡（就是你需要的场景）。
• 常用内置过渡：fade（淡入淡出）、slide（滑动过渡）、scale（缩放），也支持完全自定义过渡函数。

svelte/animate（动画模块）

• 核心功能：处理元素在DOM中的位置/顺序变化时的动画，比如列表重排、元素移动。
• 适用场景：
  • 列表项排序后的位置平滑过渡（比如拖拽排序、筛选后列表重排）。
  • 元素在不同容器间移动时的过渡效果。
• 常用方法：flip（First, Last, Invert, Playback），自动计算元素的起始/结束位置，生成自然的移动动画。示例：

<script>
  import { flip } from 'svelte/animate';
  let items = [1,2,3,4,5];

  const shuffle = () => items = items.sort(() => Math.random() - 0.5);
</script>

<button on:click={shuffle}>打乱列表</button>

{#each items as item (item)}
  <div animate:flip class="item">{item}</div>
{/each}

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