Описание тега svelte-transition

1 ответ

Сделаны ли переходы / анимации Svelte с помощью CSS или JS?

Я проверяю Svelte и нахожу из коробки гораздо больше, чем я ожидал. Одна вещь, которая немного удивила меня, где количество инструментов перехода и анимации, особенно инструментов для пользовательских переходов, и я не могу точно сказать по их синта…
13 май '19 в 07:26
1 ответ

Как я могу предотвратить переходы от задержки загрузки страницы?

У меня проблема с маршрутизацией Саппера и переходами Svelte. Я создал небольшой сайт Sapper всего с 2 страницами. На главной странице я получил компонент Карусель. Каждый из его слайдов имеет in:fade={{duration: 2000}} и out:fade={{duration: 2000, …
13 июл '19 в 10:39
4 ответа

Как сделать переходы страниц с svelte/sapper

Я хочу реализовать простой переход страницы (маршрута) в Sapper. Что-то, что легко достижимо, например, с помощью Nuxt. У кого-нибудь есть идеи, как это реализовать с помощью Sapper? Я уже обернул содержимое своей страницы в div с помощью директивы …
12 авг '19 в 18:30
1 ответ

Как обеспечить переходы только локально, когда Svelte повторно использует родительский элемент dom

В Svelte у меня есть компонент, который используется для отображения элементов в двух разных списках. Когда эти элементы перемещаются из одного списка в другой, они используют переход для анимации входа или выхода. Однако у меня также есть способ фи…
01 окт '19 в 18:06
1 ответ

Svelte: переход на реактивное изменение данных

Как лучше всего запускать анимацию при изменении реактивной переменной? Я бы хотел сделать что-то подобное: <script> import { fade } from 'svelte/transition' let count = 0; const handleClick = () => count +=1 </script> <button on:c…
28 июн '20 в 20:59
1 ответ

getClientBoundingRect для условно визуализированного элемента с анимацией в Svelte

Данный условно визуализированный div с раскрывающимся меню. Чтобы рассчитать его положение (чтобы открыть его вверх или вниз), мне нужно получить его высоту и ширину. Конечно, элемент не получает правильных размеров до того, как будет выполнен перех…
0 ответов

Анимировать отступы дерева в Svelte

Я пытаюсь анимировать движущиеся элементы в древовидной структуре данных в Svelte, и у меня возникают трудности. В частности, у меня проблемы с отступом / отступом элементов с красивой анимацией. Я хочу отобразить дерево и иметь возможность выбирать…
11 авг '20 в 17:35
1 ответ

Как правильно изменить скорость перехода компонентов?

Моя цель - обеспечить скорость перехода с помощью свойств компонентов и установить разные значения для роста и сжатия. Пока мне удалось добиться этого, изменив стиль компонентов программно. <script> let isFullHeight = false export let fullHeig…
16 окт '20 в 19:24
1 ответ

Как добавить эффект скольжения вверх при удалении записи в Svelte?

Я работаю над небольшим приложением Svelte в учебных целях (я новичок в Svelte). Приложение отображает JSON пользователей из API randomuser.me в таблице Bootstrap 4. у меня есть это deleteUser() метод const deleteUser = (uid) => { let itemIdx = f…
26 сен '20 в 00:48
2 ответа

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

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

Элемент Svelte при переходе не обрезается

Поэтому не знаю, как это очень хорошо объяснить, но в основном элемент, который в настоящее время находится в переходе, используя svelte/transitionперекрывает элементы, которые должны его обрезать. См. Изображения ниже Без обтравочного элемента: С о…
0 ответов

Аналогично пакету `react-transition-group`, но для стройного?

Сейчас я пытаюсь сделать что-то вроде этого:https://www.youtube.com/watch?v=IF6k0uZuypA Но дело в том, что он делает это в reactно я хочу сделать это в svelte. Я знаю, что могу использовать стройные переходы, и я тоже пробовал, но я просто не могу с…
19 июн '21 в 15:09
1 ответ

Svelte переход в __layout

Как можно использовать переходы в __layout для загрузки страницы с анимацией? __layout.svelte : <script> import Header from '$lib/Header/index.svelte' import Footer from '$lib/Footer/index.svelte' import '../../app.css' import Animate from '$l…
01 июл '21 в 10:17
2 ответа

Как использовать два стройных перехода на одном переключаемом элементе?

У меня есть поле ввода, которое я хочу скрыть / показать, и делаю это с постепенным переходом между слайдами. У меня есть два примера, которые я придумал, но у обоих есть свои недостатки, и я хотел бы знать, есть ли более элегантное решение. Мне про…
03 июл '21 в 14:41
2 ответа

Изящная анимация блоков перехода

У меня есть такой компонент <ul class="space-y-3 flex-col items-end justify-end absolute bottom-6 left-6 right-6 overflow-hidden"> {#each $chatDisplayQueue as chatEvent (chatEvent.id)} <div in:fly={{y:150,duration: 200}} out:fade={{duration…
06 июл '21 в 19:05
0 ответов

Изменение размера элементов в гибком контейнере при использовании блоков Svelte #if

Я использую Svelte и flexbox для добавления и удаления элементов из контейнера, при этом динамически изменяя размер постоянных элементов внутри контейнера, чтобы всегда занимать оставшееся пространство. Я бы хотел добавить и убрать переходы элементо…
1 ответ

Svelte-переход определяется для каждого перехода, а не для каждого компонента

Я разрабатываю пользовательский интерфейс Svelte с полной навигацией по страницам с помощью svelte-spa-router. Я сталкиваюсь со случаем, когда дизайнер UX определил переход между страницей «на переход», а не на страницу, он должен быть в Svelte (AFA…
14 сен '21 в 10:40
2 ответа

Как передать animate:flip компоненту в svelte?

Я пытаюсь оживить этот список виджетов. Конечно, я не могу просто компонент, Svelte нужен элемент DOM. <!-- invalid --> {#each widgets as widget (widget.id)} <Widget {...widget} animate:flip/> {/each} Обычно я бы решил это с помощью прос…
2 ответа

Svelte переход по страницам, дублирующий весь сайт __layout.svelte

Я новичок в Svelte и пытаюсь применить анимацию к содержимому моей страницы, когда пользователь переходит на новую страницу. Однако из-за анимации весь мой веб-сайт дублируется во время анимации. Мой контент выглядит так: Это связано с отсутствием с…
09 ноя '21 в 13:26
1 ответ

Переход на Svelte, кажется, закончился слишком рано

Я пытаюсь создать простой переход в Svelte, где у меня есть карточки, которые анимируются при загрузке страницы. Я следовал этому ответу , чтобы заставить его работать правильно onMount, так что было нормально. Однако сам переход, кажется, слишком б…
30 янв '22 в 18:29