Изящные переходы и анимация при загрузке страницы

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

Как Svelte обрабатывает анимацию при загрузке страницы? Нужно ли мне использовать onMount(), чтобы они работали правильно?

Источник

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>
Источник

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

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

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

import App from './App.svelte';

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

РЕДАКТИРОВАТЬ:

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

Источник
Другие вопросы по тегам