#svelte #svelte-transition
#плавный #плавный переход
Вопрос:
В настоящее время я работаю над веб-сайтом, используя Svelte и Sapper. Я использую плавные переходы для анимации некоторых элементов страницы. Всякий раз, когда я переключаюсь на новый маршрут страницы, переходы анимируются правильно. Но когда я загружаю страницу в первый раз, они не анимируются.
Как Svelte обрабатывает анимацию при загрузке страницы? Нужно ли мне использовать onMount(), чтобы заставить их работать должным образом?
Ответ №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>
Комментарии:
1. @FractalHQ создал для этого хороший компонент
Ответ №2:
Из документов Svelte:
По умолчанию переходы во вступление не будут воспроизводиться при первом рендеринге. Вы можете изменить это поведение, установив значение intro: true при создании компонента.
Итак, если вы хотите, чтобы все ваше приложение по умолчанию загружало переходы во всем приложении, просто выполните следующие действия в main.js:
import App from './App.svelte';
const app = new App({
target: document.body,
intro: true
});
Редактировать:
См. Ответ Рича об использовании сапера.
Комментарии:
1. Кажется, это работает, но строка удаляется всякий раз, когда я начинаю
yarn run dev
.2. Не видя кода, я не могу вам в этом помочь. Предоставленное решение работает для меня в новой сборке сапера, но я использую npm, а не Yarn.
3. Это действительно сгенерированный файл, и его редактирование не принесет никакой пользы