复制整个站点的 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>

但是，当动画执行时。它复制了所有内容（即.entire-page）：这是我浏览器中的结果，直到动画消失：

<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 转换过程中，整个页面都会出现。（几乎）您无能为力。

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

如果您不想让两页一页一页地出现，您必须将它们放在另一个 div 中（始终存在）并开始在 [=29= 中调整定位].例如，这可用于让页面从右侧滑入并从左侧滑出，给人一种将另一个推出的印象。

Answer 2

我有一些图像有同样的问题，我想根据 page.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 在表达式的值发生变化时销毁并重新创建它们的内容。 {#key} 的文档：https://svelte.dev/docs#key

复制整个站点的 Svelte 页面转换 __layout.svelte

Svelte page transition duplicating entire site __layout.svelte

html

svelte-3

sveltekit

svelte-transition