3

我正在使用 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 中，我没有找到一种方法来知道我来自哪里（即 prevision location）来相应地管理转换。

有什么想法吗 ？

4

1 回答 1

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 代码之前使用捕获阶段运行。）

于 2021-11-07T08:17:13.217 回答