Описание тега react-spring

NoneReact-spring - это набор простых строительных блоков, которые должны покрывать большую часть потребностей анимации, связанной с пользовательским интерфейсом, в приложении React.
0 ответов

React-spring `Keyframes`, кажется, добавляет неявную задержку

Мой вопрос касается двух песочниц одинаковой базовой анимации. Один использует Spring а другой использует Keyframes.Spring, Весенняя версия: https://codesandbox.io/s/189kvwk3p3 Версия ключевых кадров: https://codesandbox.io/s/wz6nnyomvl Единственное…
15 янв '19 в 14:42
1 ответ

Как реализовать дизайн с реагирующей пружиной?

В репозитории проекта в приложении JS-файлы установлено приложение response-redux с CSS. Теперь я должен анимировать картинки с помощью мыши, как на этом сайте: https://www.madwell.com/ Компонент изначально был функциональным компонентом, и я измени…
15 ноя '18 в 07:00
1 ответ

Переход с реагирующей пружины не оживляет переход в состояние

Я делаю компонент Collapse, используя ответную пружину, которая получает детей и логическое значение collapsed двигательный Это довольно просто, но по какой-то причине анимация, когда дети монтируются, никогда не запускается и в то же время оставляе…
25 дек '18 в 12:31
0 ответов

Тестирование снимков с помощью реактивной пружины / реактивного движения

Я пытаюсь сделать снимок для тестирования моих компонентов React с помощью Jest и Enzyme. Некоторые компоненты имеют компонент анимации (импортируется из react-spring/react-motion) в них, которая выполняет функцию своего потомка. Это делает тестиров…
0 ответов

Можно ли сделать последовательную анимацию реагировать-весной?

Реакция -весна выглядит потрясающе, но примеры в их github AFAIK - это простая анимация и очень мало последовательных анимаций, однако обратите внимание на эту последовательную анимацию. Я имею в виду, мне интересно, могу ли я сделать последовательн…
23 янв '19 в 18:47
0 ответов

Как переключить z индекс при работе с реагирующей пружиной

https://codesandbox.io/s/64mwo66znr Я хотел бы, чтобы z-индекс выбранного элемента был выше, чем у всех других элементов, однако только z-индекс элемента "settings" всегда выше, несмотря на некоторые из немногих методов, которые я пробовал. Поэтому…
12 фев '19 в 03:57
3 ответа

Что делает "оживленный" в реагирующей весне?

В настоящее время я вхожу в борьбу с библиотекой анимации реагирования-весны. В некоторых демонстрациях CodeSandbox (например, https://codesandbox.io/embed/j150ykxrv) в документации импортируется что-то, называемое "анимированным": import { Transiti…
17 окт '18 в 11:10
1 ответ

React / React Spring List Animate Out не работает

Я экспериментирую с react-spring пытается применить анимацию к списку компонентов при монтировании / размонтировании, используя <Transition> составная часть. Анимация происходит, как и ожидалось, при монтировании, но совсем не происходит при о…
12 авг '18 в 22:11
1 ответ

Анимация React-spring работает только при первом рендере

Я пытаюсь анимировать новые записи в массиве, как они появляются с react-spring Он отлично работает при первом рендере, но не обновляется при обновлении Вот песочница с кодом, где я воспроизвел проблему с интервалом: https://codesandbox.io/s/01672ok…
06 авг '18 в 08:31
0 ответов

Стол с активной реагирующей пружиной translate3d не работает в стиле

У меня есть проект с изменением порядка строк таблицы, и я решил использовать реагирующую пружину, чтобы справиться с этим. но в таблице это так сложно, между строк внутри таблицы есть пространство, и я думаю, что это из-за стиля CSS transform: tran…
1 ответ

Как получить значение scrollY при использовании переполнения?

У меня есть следующее приложение React, в котором я использую реагирующую пружину для анимации между маршрутами и анимации различных элементов на основе текущей позиции прокрутки. Когда я использую overflow: scroll на Home компонент, то я не могу ве…
01 сен '18 в 03:17
0 ответов

Базовый пример реактивной пружины

Я пытаюсь реализовать базовый пример анимации реагирующей пружины, но Typescript, а также консоль после компиляции выдает много ошибок. Я взял на задний план этот пример: import { Spring } from 'react-spring' <Spring from={{ opacity: 0 }} to={{ o…
26 дек '18 в 21:31
2 ответа

Продолжительность анимации в React Spring

У меня довольно простой сценарий постепенного появления, где я хочу контролировать продолжительность анимации. Но я не могу обернуть голову вокруг того, как этого добиться. Выдержка из кода: function BoxA() { return ( <Spring from={{ opacity: 0.2…
07 янв '19 в 12:18
1 ответ

Как анимировать текст, когда он обновляется с использованием Reaction-Spring?

В приложении act.js у меня есть простой текст, который хранится в состоянии приложения и передается дочернему компоненту, который будет отображать его напрямую. я хочу анимировать переход, чтобы при его изменении предыдущий текст исчезал, а затем вх…
16 фев '19 в 10:47
0 ответов

Анимация высоты в React Spring не работает

Я оживлял весы с React Spring. Следующее работает отлично: <ul> {items.map((item, index) => { if (index === items.length - 1) { return ( <Spring key={item.id} from={{ progress: 0, }} to={{ progress: 1, }} config={{ delay: 300, duration: …
05 фев '19 в 16:51
1 ответ

Реактивная пружина Анимирование переключателя

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

Как реализовать функцию Пауза и Возобновление, используя Переход реактивной пружины?

У нас есть требование показать переход в реакции, и при наведении мыши мы должны остановить переход, и когда мы вытащим мышь, он должен возобновиться? Мы можем показать переход, но не можем реализовать функцию паузы и возобновления. Любое предложени…
16 ноя '18 в 12:11
2 ответа

Можно ли оживить до 100% в реактивной пружине?

Я использую реагирующую пружину, чтобы попытаться анимировать содержимое AJAX по мере его загрузки. У меня есть контейнерный компонент, который я иногда хочу анимировать до 'auto' с 0, а иногда я хочу анимировать до 100% в зависимости от пропускаемо…
17 окт '18 в 11:19
1 ответ

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

Вот пример jQuery для анимации индикатора выполнения. и я хочу эту функцию в Reactjs без jQuery. Как реализовать эту функцию.
1 ответ

Реакторная пружина однокомпонентного монтажа / демонтажа показывает

Я пытаюсь создать анимацию, когда компонент монтирует / размонтирует с помощью React-spring: import { Transition, animated } from 'react-spring' ... export class CompName extends PureComponent<CompNamePropsType> { static defaultProps = { isExp…
09 ноя '18 в 15:30