使用 Svelte 和 Sapper 实现流畅的页面过渡

更新：这篇文章已经两年多了，但仍然很有参考价值。这项技术应该与SvelteKit完全一样。

您是否曾经遇到过在页面间导航时带有炫酷动画的网站？例如Sarah Drasner的这个网站。通常，您会使用客户端库和巧妙的 CSS 技巧来实现这类功能。这可能没什么问题，但它会增加网站的整体下载大小，并且随着网站复杂度的增加，CSS 会变得难以维护。但是，多亏了Svelte，我们现在无需任何客户端库或 CSS 技巧就可以实现这些酷炫的功能：

（尝试一下）

所以现在我们可以拥有酷炫的 PWA，它们在服务器端渲染，页面过渡流畅，并且编译后只包含极少量的 JavaScript 代码。无需客户端库、虚拟 DOM 或重新调整 CSS 类。哇哦！

就这样，我们的生活圆满了。因为我们还想要什么呢？现在我们都应该去赞美JavaScript 之神 Rich Harris 了。还是说我们需要更多 JavaScript 框架？难道我们拥有的还不够吗？我受不了了。赶紧停下来。啊啊啊啊，终于结束了。

如何？

这些动画都使用了 Svelte 的交叉淡入淡出过渡。如果您以前没有使用过，建议您查看教程。它将教您如何在同一个组件中交叉淡入淡出两个元素。但我们感兴趣的是如何将元素从一个组件交叉淡入淡出到另一个组件（在 Sapper 中，每个页面都是一个组件）。使交叉淡入淡出过渡在不同文件中定义的不同页面（或组件）之间工作的技巧是，在单独的模块/文件中创建交叉淡入淡出过渡，并将import其插入到不同的组件中。查看教程：

在这里，我们在其自己的文件中创建交叉淡入淡出转换并导出send和receive函数，以便我们可以在不同的文件中重复使用它们。

// crossfade.js
import { quintOut } from 'svelte/easing';
import { crossfade } from 'svelte/transition';
const [send, receive] = crossfade({
    duration: d => Math.sqrt(d * 300),
    fallback(node, params) {
        const style = getComputedStyle(node);
        const transform = style.transform === 'none' ? '' : style.transform;

        return {
            duration: 600,
            easing: quintOut,
            css: t => `
                transform: ${transform} scale(${t});
                opacity: ${t}
            `
        };
    }
});

export {send, receive};

然后我们使用sendandreceive函数。

// page1.svelte
<script>
  import {send, receive} from './crossfade.js';
</script>

<main>
  <h1 out:send="{{key: 'h1'}}" in:receive="{{key: 'h1'}}">Look, I'm above the image</h1>
  <img out:send="{{key: 'borat'}}" in:receive="{{key: 'borat'}}" alt='Borat' src='great-success.png'>
</main>

然后再次使用相同 send的receive功能，使交叉淡入淡出跨组件工作。

// page2.svelte
<script>
  import {send, receive} from './crossfade.js';
</script>

<main>
  <img out:send="{{key: 'borat'}}" in:receive="{{key: 'borat'}}" alt='Borat' src='great-success.png'>
  <h1 out:send="{{key: 'h1'}}" in:receive="{{key: 'h1'}}">Now I am below the image</h1>
</main>

容器需要绝对定位，否则将不起作用。

// global.css
main {
  position: absolute;
  width: 100%;
}

好了。感谢阅读。

如果您需要专业支持，请访问https://buhrmi.dev 。

文章来源：https://dev.to/buhrmi/svelte-component-transitions-5ie