页面加载时的苗条过渡和动画答案

【问题标题】：Svelte transitions and animations on page load页面加载时的苗条过渡和动画
【发布时间】：2021-01-31 09:37:34
【问题描述】：

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

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

【问题讨论】：

标签： svelte svelte-transition

【解决方案1】：

来自 Svelte 文档：

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

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

import App from './App.svelte';

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

编辑：

查看 Rich 对 Sapper 使用的回答。

【讨论】：

这似乎有效，但每当我启动 yarn run dev 时，该行就会被删除。
没有看到代码我无法帮助你。提供的解决方案在全新的 Sapper 版本中适用于我，但我使用的是 npm 而不是 Yarn。
那确实是生成的文件，编辑也没用

【解决方案2】：

因为 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>

【讨论】：