Svelte 交叉淡入淡出动画仅在从不同文件导入时才有效

Question

我在 svelte 中使用交叉淡入淡出动画，但是如果我直接在同一页面中实现逻辑（如下所示），后备动画将触发（这不是预期的行为）。但如果我将交叉淡入淡出放在不同的 .js 文件中并导入它，动画效果就非常好。

<script>
  import { quintOut } from "svelte/easing";
  import { crossfade } from "svelte/transition";
  export let todos;
  export let done;

  export const [send, receive] = crossfade({
    duration: 300,
    fallback(node, params) {
      const style = getComputedStyle(node);
      const transform = style.transform === "none" ? "" : style.transform;

      return {
        duration: 600,
        easing: quintOut,
        css: (t) => `
            transform: ${transform} scale(${t});
            opacity: ${t}
        `,
      };
    },
  });
</script>

<ul>
  {#each $todos.filter((/** @type {{ done: any; }} */ todo) => todo.done === done) as todo (todo.id)}
    <label>
      <li class:done in:receive={{ key: todo.id }} out:send={{ key: todo.id }}>
        <input
          type="checkbox"
          checked={todo.done}
          on:change={(e) => todos.mark(todo, e.currentTarget.checked)}
        />
        <span>{todo.description}</span>
      </li>
    </label>
  {/each}
</ul>

<style>
  .done {
    opacity: 0.6;
    text-decoration: line-through;
  }

  ul {
    list-style-type: none;
    margin: 0;
    padding: 0;
    width: 100%;
  }

  li {
    padding: 1rem;
    margin: 1.3rem;
    font-size: 1.2rem;
    box-shadow: 0 3px 10px rgb(0 0 0 / 0.2);
    border-radius: 3px;
  }
</style>

Answer 1

这是预料之中的。如果将转换定义为组件脚本的一部分，则每个组件实例将有单独的实例，即组件将断开连接。

您不一定需要单独的文件，但也可以将定义移动到

<script context="module">

（Svelte 5 中的

<script module>

）。