Svelte переход по страницам, дублирующий весь сайт __layout.svelte

Question

Я новичок в Svelte и пытаюсь применить анимацию к содержимому моей страницы, когда пользователь переходит на новую страницу. Однако из-за анимации весь мой веб-сайт дублируется во время анимации.

Мой контент выглядит так:

Это связано с отсутствием ссылки на элементы?

Answer 1

Да, этого следовало ожидать.(кроме смешения анимации и перехода).

Ваша первая страница покидает DOM, а запускается, это не более чем какой-то причудливый css, который каким-то образом преобразует элемент, в вашем случае это какая-то слайд-анимация. DOM все еще существует до конца этой анимации.

В то же время, когда появляется ваша новая страница, это вызывает , опять же просто причудливый css, но DOM есть.

Как видите, логично, что при переходе ввода / вывода будут присутствовать обе страницы целиком.(Почти) ты ничего не можешь поделать.

Однако вы можете отложить анимация с продолжительностью во-первых, входящая страница будет ждать, пока выходящая страница не ускользнет. Это, конечно, работает только в том случае, если обе страницы имеют одинаковую продолжительность перехода.

Если вы не хотите, чтобы две страницы располагались одна под другой, вам нужно обернуть их в другой div (который всегда присутствует) и начать возиться с позиционированием в css. Это можно использовать, например, для того, чтобы страница скользила вправо и влево, создавая впечатление, что одна вытесняет другую.

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