每个过渡而不是每个组件定义的苗条过渡

Question

我正在使用 svelte-spa-router 开发一个带有全页导航的 Svelte UI。 我面临这样一种情况，即 UX 设计师定义了页面“每个转换”之间的转换，而不是每个页面都应该在 Svelte (AFAIK) 中。

例如在这个 UX 页面 B1 中，过渡将：

• 回到首页A时立即消失；
• 前往C1时向左滑动；
• 去B2时解散。

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

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

我尝试利用过渡属性可以是对象和反应性这一事实。

<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 历史。 （排序很重要，您可以在 spa-router 代码之前使用capture phase 运行。）