页面加载时的 Svelte 过渡和动画

Question

我目前正在使用 Svelte 和 Sapper 开发一个网站。我正在使用 Svelte 过渡来为一些页面元素设置动画。每当我更改为新的页面路由时，转换都会正确设置动画。但是当我第一次加载页面时，它们没有动画。

Svelte 如何处理页面加载时的动画？我需要使用 onMount() 才能让它们正常工作吗？

Answer 1

来自 Svelte 文档：

By default intro transitions will not play on first render. You can modify this behaviour by setting intro: true when you create a component.

因此，如果您希望您的整个应用程序在整个应用程序中默认加载转换，您只需在 main.js 中执行以下操作：

import App from './App.svelte';

const app = new App({
    target: document.body,
    intro: true
});

编辑：

查看 Rich 对 Sapper 用法的回答。

Answer 2

因为 Sapper server-renders 页面，intro: true 会导致可见内容突然变得不可见然后再过渡回来。

为避免这种情况，您需要首先防止内容 server-rendered。最简单的方法确实是使用 onMount:

<script>
  import { onMount } from 'svelte';

  let ready = false;
  onMount(() => ready = true);
</script>

<div class="always-visible">
  {#if ready}
    <div class="visible-on-mount">...</div>
  {/if}
</div>

页面加载时的 Svelte 过渡和动画

Svelte transitions and animations on page load

svelte

svelte-transition