svelte - 页面加载时的苗条过渡和动画

Question

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

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

Answer 1

因为 Sapper 服务器渲染页面，intro: true会导致可见内容的尴尬闪现变得不可见，然后再过渡回来。

为避免这种情况，您首先需要防止内容被服务器渲染。最简单的方法确实是使用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>

Answer 2

来自 Svelte 文档：

默认情况下，介绍过渡不会在第一次渲染时播放。您可以通过在创建组件时设置 intro: true 来修改此行为。

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

import App from './App.svelte';

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

编辑：

请参阅 Rich 对 Sapper 使用的回答。