Svelte页面转换复制整个网站__layout.Svelte

Question

我是Svelte的新手，当用户导航到新页面时，我正试图将动画应用于页面的内容。然而，动画会导致我的整个网站在动画过程中重复。

我的内容如下：

<div class="entire-page">
<nav>
<ul>
<li> Navigation items </li>
<li> Navigation items </li>
<li> Navigation items </li>
</ul>
</nav>

<div class="content" in:slideIn out:slideOut>
Here is my first page content. This is supposed to slide in / out.
</div>
</div>

但是，当动画执行时。它复制了所有内容(即整个页面(：这是我浏览器中的结果，直到动画消失：

<div class="entire-page">
<nav>
<ul>
<li> Navigation items </li>
<li> Navigation items </li>
<li> Navigation items </li>
</ul>
</nav>

<div class="content" in:slideIn out:slideOut>
Here is my first page content. This is supposed to slide in / out.
</div>
</div>
<div class="entire-page">
<nav>
<ul>
<li> Navigation items </li>
<li> Navigation items </li>
<li> Navigation items </li>
</ul>
</nav>

<div class="content" in:slideIn out:slideOut>
Here is my second page content. This is supposed to slide in / out.
</div>
</div>

这是由于缺少对元素的引用吗？

Answer 1

是的，这是意料之中的事。(除了动画和过渡之间的混合(。

您的第一个页面离开DOM，out:transition被触发，这只不过是一些奇特的css，以某种方式转换元素，在您的情况下是某种幻灯片动画。DOM仍然存在，直到该动画结束。

在你的新页面进入的同时，这会触发in:transition，同样只是花哨的css，但DOM就在那里。

正如您所看到的，从逻辑上讲，在输入/输出转换期间，两个完整的页面都将出现。(几乎(你真的无能为力。

但是，可以做的一件事是将in:动画延迟到out:动画的持续时间，这样传入页面将等待传出页面滑出。当然，只有当两个页面的过渡持续时间相同时，这才有效。

如果你不想让这两个页面一个放在另一个下面，你必须把它们包装在另一种div中(它总是存在的(，并开始在css中乱定位。例如，这可以用来让页面从右向左滑动，给人一种一个在推出另一个的印象。

Answer 2

我也遇到了同样的问题，我想根据页面反应性地更改一些图像。url。pathname，我的整个__layout.svelte都被复制了。

我使用密钥指令解决了这个问题

<script lang="ts">
import { page } from '$app/stores';
import { fade } from 'svelte/transition';
import { colors } from '/stores';
const nav = [{ title: '/Dev', path: '/', imgUrl: '../images/dev', color: 'devBG', keyword: '/dev' }]
let keywordTitle: string;

let activeIndex: number = 0;
$: pageUrl = $page.url.pathname;
$: {
switch (pageUrl) {
case '/':
keywordTitle = nav[0].keyword;
colors.set(nav[0].color);
activeIndex = 0;
break;
}
</script>
{#each nav as cat, i}
{#key $page}
{#if activeIndex === i}
<img transition:fade src="{cat.imgUrl}-1800.jpg " />
{/if}
{/key}
{/each}

键在表达式的值更改时销毁并重新创建其内容。｛#key｝的文档：https://svelte.dev/docs#key