Блог

В настоящее время я работаю над веб-сайтом, используя Svelte и Sapper. Я использую плавные переходы для анимации некоторых элементов страницы. Всякий раз, когда я переключаюсь на новый маршрут страницы, переходы анимируются правильно. Но когда я загружаю страницу в первый раз, они не анимируются.

Как 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>
  

Из документов Svelte:

По умолчанию переходы во вступление не будут воспроизводиться при первом рендеринге. Вы можете изменить это поведение, установив значение intro: true при создании компонента.

Итак, если вы хотите, чтобы все ваше приложение по умолчанию загружало переходы во всем приложении, просто выполните следующие действия в main.js:

 import App from './App.svelte';

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

Редактировать:

См. Ответ Рича об использовании сапера.