页面加载时的平滑过渡和动画 [英] Svelte transitions and animations on page load

问题描述

我目前正在开发一个使用Svelte和Sapper的网站。我正在使用Svelte过渡来制作一些页面元素的动画。每当我更改到新的页面路线时，过渡都会正确地显示动画。但当我第一次加载页面时，它们没有动画效果。

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

推荐答案

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

这篇关于页面加载时的平滑过渡和动画的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！