Javascript 当Svelte重用父dom元素时，如何确保仅本地转换

在Svelte中，我有一个组件，用于显示两个不同列表中的项目。当这些项目从一个列表移动到另一个列表时，它们使用过渡来设置输入或输出动画

但是，我也有一种方法可以过滤屏幕上显示的内容。显示一组新项目将使用相同的组件，但数据不同。在这种情况下，我不希望出现过渡动画。我假设添加

local

修饰符就可以了，但是Svelte似乎不是将父元素放到列表中，而是重用它并在现有的列表DOM元素中添加新数据

我试图重现我在下面的示例代码中看到的内容

通缉行为：

单击待办事项会将待办事项从一个列表切换到另一个列表

单击“切换类别”将切换列出的TODO，而无需为添加或删除的TODO设置动画

实际行为：

一切如期而至

切换到的TODO与动画一起切换

我怎样才能改变我的例子，使我得到我想要的效果

App.svelte：

<script>
    import Todos from './Todos.svelte';

    let todos = [
        { id: 1, category: 'personal', name: 'Walk dog', done: false },
        { id: 2, category: 'personal', name: 'Take out trash', done: false },
        { id: 3, category: 'work', name: 'Make login page functional', done: false },
        { id: 4, category: 'work', name: 'Make login page elegant', done: false }
    ];

    let currentCategory = 'personal';
    const toggleCategory = () => {
        currentCategory = currentCategory == 'personal' ? 'work' : 'personal';
    }

    const toggleTodo = id => {
        todos = todos.map(todo => {
            if (todo.id === id) {
                return { ...todo, done: !todo.done }
            }
            return todo;
        });
    }

    $: categoryTodos = todos.filter(x => x.category == currentCategory);
</script>

<button on:click={toggleCategory}>Switch Categories</button>
<Todos todos={categoryTodos} {toggleTodo}>
</Todos>

从“/Todos.svelte”导入TODO；
让todos=[
{id:1，类别：'personal'，名称：'walkdog'，完成：false}，
{id:2，类别：'personal'，名称：'Take out trash'，done:false}，
{id:3，类别：'work'，名称：'Make login page functional'，done:false}，
{id:4，类别：'work'，名称：'makelogingpage优雅'，done:false}
];
让currentCategory='个人'；
常量切换类别=（）=>{
currentCategory=currentCategory==‘个人’？‘工作’：‘个人’；
}
const toggleTodo=id=>{
todos=todos.map（todo=>{
if（todo.id==id）{
返回{…todo，done:！todo.done}
}
返回待办事项；
});
}
$：categoryTodos=todos.filter（x=>x.category==currentCategory）；
切换类别

Todos.svelte：

<script>
    import { slide } from 'svelte/transition';
    export let todos;
    export let toggleTodo;

    $: complete = todos.filter(t => t.done);
    $: incomplete = todos.filter(t => !t.done);
</script>

<h1>Incomplete</h1>
<ul>
    {#each incomplete as {id, name} (id)}
    <li transition:slide|local on:click={() => toggleTodo(id)}>{name}</li>
    {/each}
</ul>
<h1>Complete</h1>
<ul>
    {#each complete as {id, name} (id)}
    <li transition:slide|local on:click={() => toggleTodo(id)}>{name}</li>
    {/each}
</ul>

从“苗条/过渡”导入{slide}；
出口托多；
导出let toggleto；
$：complete=todos.filter（t=>t.done）；
$：uncomplete=todos.filter（t=>！t.done）；
残缺的

{#每个都不完整为{id，name}（id）}
toggleTodo（id）}>{name}
{/每个}

完成

{#每个都作为{id，name}（id）}完成
toggleTodo（id）}>{name}
{/每个}

更新 自v3.28.0以来，此关键功能现在已成为Svelte的一部分（请参阅）

语法如下所示：

{#key expression}...{/key}

---

先前的答复 在React中，您可以使用

键

道具使渲染器重新创建可以重用的元素（相同的标记等）

与React中一样，当键的值更改时（否则重用），将重新创建组件

所以

出口商品
出口许可证类别
$：items=allItems.filter（x=>x.category==currentCategory）
{#每个[项目]作为待办事项（当前类别）}
{/每个}

呼呼。对吧?

使用

currentCategory

作为键，每次cattegory发生更改时，都会创建一个新的

组件，这可能是您想要的

与React一样，必须明智地选择键的值，以便在每次需要时重新创建，但不能超过此值（否则，在您的情况下，它将终止所需的项间转换）

键的值不限于每个循环中当前评估的项。它可以来自任何地方的范围在苗条，所以你可以得到创造性。它甚至可以是一个内联对象

{}

，它将重新创建。。。嗯，基本上一直都是这样

编辑

您可以将hack转换为自己的组件，以便在使用者中使用更清晰的语法：

导出let密钥
//我们只需要一个1长度的数组
常量项=[0]
{#每个项目作为x（键）}
{/每个}

这样使用：

从“./Keyed.svelte”导入关键帧
出口出租物品
出口出租类别

---

请参见Svelte的回复。

有人提出了一个问题来请求此功能：我发布了一个组件，该组件在npm上实现了此解决方案：

// React
<Todos items={items} key={currentCategory} />