javascript - 每个转换而不是每个组件定义的 Svelte 转换

Question

我正在使用 svelte-spa-router 开发一个带有全页导航的 Svelte 用户界面。我遇到的情况是，UX 设计师定义页面之间的转换是“每次转换”，而不是每页，它应该在 Svelte (AFAIK) 中。

例如在这个 UX 页面 B1 out transition would :

• 回到首页A时瞬间消失;
• 去C1时向左滑动;
• 去B2时解散。

UX 实际上是有意义的，因为 B1/B2、C1/C2 相似但从不同的 Angular 处理同一主题。

Svelte 转换效果很好，但每个组件都定义了一个 in 转换和一个 out 转换。

我尝试利用过渡属性可以是对象和响应式(Reactive)这一事实。

<script>
    import { fade } from "svelte/transition";
    let page = "A";
    let duration = 0;
    function goto(dest) {
        if(dest == "A" || page == "A") {
            duration = 0;
        } else {
            duration = 400;
        }
        page = dest;
    }
</script>

{#if page == "A"}
    <section class="A" transition:fade={{duration: duration}}>
        <h1>Page A</h1>
        <nav on:click={e => goto("B1")}>Goto B1</nav>
        <nav on:click={e => goto("B2")}>Goto B2</nav>
    </section>
{:else if page == "B1"}  
    <section class="B1" transition:fade={{duration: duration}}>
        <h1>Page B1</h1>
        <nav on:click={e => goto("A")}>Goto Back</nav>
        <nav on:click={e => goto("B2")}>Goto B2</nav>
    </section>
{:else if page == "B2"}
    <section class="B2" transition:fade={{duration: duration}}>
        <h1>Page B2</h1>
        <nav on:click={e => goto("A")}>Goto Back</nav>
        <nav on:click={e => goto("B1")}>Goto B1</nav>
    </section>
{/if}

<style>
    section {
        position: absolute;
        width: 500px;
        height: 500px;
    }
    section.A {
        background: pink;
    }
    section.B1 {
        background: blue;
    }
    section.B2 {
        background: yellow;
    }
</style>

但我不知道如何更改过渡效果(也许是自定义过渡功能？)。此外，这个解决方案看起来非常复杂、耗时，并且在更复杂的用户体验中可能真的变成一团意大利面。

此外，在 svelte-spa-router 中，我没有找到一种方法来知道我来自哪里(即预测 location)以相应地管理转换。

有什么想法吗？

Answer 1

in: 语法接受 javascript 函数，fade 是允许切换的常规 javascript 函数。

// pageTransion.js
function slidePage(el) {
  return fly(el, { x: 200, duration: 300 });
}
function disolvePage(el) {
  return fade(el, { duration: 300 });
}
let previous = "";
let current = "";
export function setNextPage(next) {
  previous = current;
  current = next;
}

export function pageTransition(el) {
  const transitions = {
    "b1-b2": disolvePage,
    "b1-c1": slidePage,
    // etc
  };
  return transitions[previous + "-" + current];
}


// b1.svelte
<div transition:pageTransition>

在激活页面之前，您需要调用 setNextPage。

svelte-spa-router 不会公开以前的 url，但您可以监听 onhashchange 事件并自己存储 url 历史记录。(排序很重要，您可以使用 capture phase 在 spa 路由器代码之前运行。)