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

Question

我正在开发一个 Svelte UI，使用 svelte-spa-router 进行全页导航。我遇到的情况是，UX 设计师定义页面之间的转换是“每次转换”，而不是每页，它意味着在 Svelte 中（AFAIK）。

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

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

用户体验实际上很有意义，因为 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 到运行。）

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

Svelte transition defined per transition and not per component

javascript

svelte

svelte-3

svelte-transition