Я настоятельно рекомендую вам взять в руки Svelte и пройтись по их учебнику, так как в этой статье мы рассмотрим конкретную часть, посвященную пользовательским JS-переходам.
Начало работы
Инициализируйте наш новый проект с помощью игровой площадки Svelte из CodeSandbox или используйте один из их шаблонов, доступных на Github.
# Creating a new project
npx degit sveltejs/template
# Install the dependencies...
npm install
…затем запустите Rollup.
npm run dev
Перейдите на localhost:8080 и вы увидите, что ваше приложение запущено. Отредактируйте файл компонента в src, сохраните его и перезагрузите страницу, чтобы увидеть свои изменения.
Установка
Возьмите следующий код и установите npm-пакет Svelte.Typewriter.
# yarn
yarn add -D svelte-typewriter
# npm
npm i -D svelte-typewriter
Использование
Вам нужно импортировать компонент Svelte и обернуть ваши элементы этим компонентом.
<script>
import Typewriter from 'svelte-typewriter'
</script>
<Typewriter>
<h1>Testing the typewriter effect</h1>
<p>Lorem ipsum dolor sit amet consectetur</p>
</Typewriter>
Реквизиты
Компонент может получать реквизиты, которые позволяют манипулировать поведением результирующей анимации, эти реквизиты делятся на 4 группы.
Мы рассмотрим группу modes, которая позволяет нам управлять поведением эффекта печатной машинки, передавая определенные реквизиты компоненту <Typewriter>.
Вот краткое описание:
1. Режим по умолчанию
Применение анимации одновременно ко всем элементам, в отличие от последовательной анимации в каскадном режиме.
<Typewriter>
<h1>Testing the typewriter effect</h1>
<p>Lorem ipsum dolor sit amet consectetur</p>
</Typewriter>
2. Каскадный режим
Анимация применяется ко всем элементам последовательно, а не одновременно.
<Typewriter cascade>
<h1>Testing the <code> cascade </code> mode</h1>
<p>Lorem ipsum dolor sit amet consectetur</p>
</Typewriter>
3. Режим цикла
Зацикливает анимацию между дочерними элементами родительского компонента Typewriter, интервал (в миллисекундах) между каждым словом может быть определен путем передачи числа в качестве параметра, в противном случае по умолчанию устанавливается значение 1500.
<Typewriter loop>
<h1>Testing the <code> loop </code> mode</h1>
<p>Lorem ipsum dolor sit amet consectetur</p>
</Typewriter>
4. LoopRandom
Очень похож на режим loop, но вместо линейного цикла анимации, он выбирает случайный дочерний элемент для анимации каждый раз, интервал (в миллисекундах) между каждым словом может быть определен путем передачи числа в качестве параметра, иначе по умолчанию 1500.
<Typewriter loopRandom>
<h1>Testing the <code> loopRandom </code> mode</h1>
<p>Lorem ipsum dolor sit amet consectetur</p>
</Typewriter>
5. скремблировать
Случайным образом перемещает все буквы в тексте элемента на определенное время, если в качестве аргумента передано число, то оно определяется как продолжительность анимации (по умолчанию 3000).
<Typewriter scramble>
<h1>Testing the <code> scramble </code> mode</h1>
<p>Lorem ipsum dolor sit amet consectetur</p>
</Typewriter>
Подведение итогов
Если вы следовали за нами, то вы должны были завершить это руководство и узнать, как сделать переход печатной машинки, который работает для любого фронтенд-проекта. Продолжайте наслаждаться Svelte. Я знаю, мне нравится!
Если вы дошли до этого момента, то я выкладываю ссылку на код для моей готовой песочницы, чтобы вы могли ее форкнуть или клонировать, и тогда работа будет сделана.
Полезные ресурсы
https://www.npmjs.com/package/svelte-typewriter
https://daisyui.com/
https://tailwindcss.com/