Публикации по теме 'react-spring'
SVG-анимация в React с использованием React-Spring
Введение
Анимации - важная часть веб-сайта, и при правильной реализации они обеспечивают хорошее взаимодействие с пользователем. Хотя есть некоторые библиотеки анимации, которые работают с React, мы собираемся взглянуть на react-spring - отличную библиотеку анимации, которая основана на физике (да, вы правильно прочитали), а не на продолжительности.
Потребность в этом посте возникла, когда я попытался анимировать svg с помощью react-spring , но не смог найти хороший ресурс от..
Вопросы по теме 'react-spring'
React Spring Transition не работает должным образом
Итак, я просмотрел документы по реагирующим пружинам и уверен, что просто не понимаю их должным образом. Но я хотел, по сути, попытаться сделать div с enter анимацией и каким-то триггером, чтобы leave
Мне не удалось вызвать это leave ....
823 просмотров
schedule
08.09.2021
React CSStransition или React-spring в map ()
Может ли кто-нибудь объяснить, как сделать плавный переход, такой как непрозрачность 0 - непрозрачность 1 с помощью CSStransiton или анимации реакции-пружины, когда данные поступают с сервера, и я делаю карту div мгновенно появляется без перехода.
Я...
94 просмотров
schedule
03.01.2022
useTransition в React Spring вызывает слишком много повторных рендеров
Я использую useTransition из react spring , чтобы построить отображение анимированных слов в виде каменной сетки для блога. Моя работа в значительной степени основана на официальной демонстрации codeandbox от react spring для каменной сетки,...
146 просмотров
schedule
26.04.2022
Игнорировать начальный переход для первой установки React-Spring
У меня есть компонент реакции, который требует перехода для входа и выхода. Но на первом монтировании не должно быть анимации входа. Я использую простое постепенное исчезновение. ключевое слово initial должно деактивировать начальный переход для...
518 просмотров
schedule
29.04.2022
React-Spring fade 2 кнопки при наведении на коробку
У меня есть коробка с двумя кнопками, сложенными в центре. Когда я наводю курсор на поле, я хочу, чтобы кнопки меняли непрозрачность от 0 до 1, и я хочу перевести свойство transform с translateY (20px) на translateY (0), чтобы они также двигались...
240 просмотров
schedule
08.06.2022
Переключение с задержкой React Spring
Название может быть не на месте, но я постараюсь объяснить здесь. Я использовал SwitchTransition в режиме in-out , но поскольку моя анимация была выполнена с использованием в основном перехватчик useSpring из пакета react-spring , я бы предпочел...
2145 просмотров
schedule
29.06.2022
как анимировать текст при его обновлении с помощью react-spring?
в приложении react.js у меня есть простой текст, хранящийся в состоянии приложения и переданный дочернему компоненту, который будет отображать его напрямую. Я хочу анимировать переход, чтобы при его изменении предыдущий текст исчезал, а затем...
2636 просмотров
schedule
10.08.2022
React-Spring useTransition перемешивает элементы моего списка
У меня есть список меток, которые я визуализирую с помощью перехода React-Spring. Идея в том, что вы можете добавлять элементы, и если их больше 5, появится кнопка «Показать еще». Нажатие этой кнопки переключает отображение всех ярлыков или только...
3223 просмотров
schedule
28.08.2022
Однокомпонентное крепление/размонтирование react-spring раскрывает
я пытаюсь создать анимацию при монтировании/размонтировании компонента с помощью React-spring:
import { Transition, animated } from 'react-spring'
...
export class CompName extends PureComponent<CompNamePropsType> {
static...
5612 просмотров
schedule
04.11.2022
Как перейти к конкретному div при нажатии кнопки в одностраничном приложении с помощью реактивного маршрутизатора?
У меня есть две кнопки («Домой», «Свяжитесь с нами») в моем заголовке, и у меня есть содержимое «Домой и свяжитесь с нами» в div на той же странице, пока я нажимаю кнопку «Домой» или «Связаться с нами», он должен прокручиваться до этого конкретного...
486 просмотров
schedule
05.06.2023
Условно анимируйте компонент React с помощью react-spring
У меня есть компонент реакции, и я хочу анимировать его при изменении состояния компонента.
Я использую useReducer const [state, dispatch] = useReducer(reducer, initialState); . Затем при нажатии я обновляю state.isOpen с false на true или...
808 просмотров
schedule
19.07.2023
Ошибка React-Spring: анимированная библиотека из React-Spring возвращает недопустимый тип элемента ERROR
Я пытаюсь сделать простую анимацию, в которой мое изображение будет исчезать.
Код ниже Я импортирую {useSpring, animated} from 'react-spring' . Я создаю простую функцию useSpring logoLoadingScreen. Затем я добавляю функцию внутри стиля для...
805 просмотров
schedule
12.10.2022
React-Spring эквивалент реактивной позы PoseGroup
React Pose PoseGroup просто анимирует элементы списка, когда список изменяется с опцией flipMove.
https://codesandbox.io/s/inspiring-herschel-37bvs
Как это сделать с помощью React-Spring?
{items.map(item => (
<Item key={item}...
89 просмотров
schedule
02.07.2023
Как выполнить две анимации последовательно, используя React-Spring?
Я попытался связать две пружины (используя useChain ), так что одна запускается только после того, как другая заканчивается, но они анимируются одновременно. Что я делаю неправильно?
import React, { useRef, useState } from 'react'
import {...
1226 просмотров
schedule
10.11.2022
Анимация добавления поля в список ящиков в React
У меня есть горизонтальный ряд ящиков, выровненных по правому краю. Я хочу добавить новый блок с правой стороны, чтобы он постепенно скользил, перемещая другие блоки влево при этом.
https://codesandbox.io/s/vibrant-curran-xqcbh?file=/src/App.js...
144 просмотров
schedule
08.12.2022
Как настроить React-spring в codepen?
Я попытался создать базовую настройку, чтобы начать практиковать реактивную пружину в CodePen, но она показывает ошибку: Uncaught ReferenceError: require is not defined . Я не знаю, почему это происходит и как это исправить.
Пока это код моего...
77 просмотров
schedule
05.06.2023
Анимации / переходы React Spring на основе медиа-запросов
У меня этот переход React Spring отлично работает:
const Nav = () => {
const[showMenu, setShowMenu] = useState(false)
const navbgTransitions = useTransition(showMenu, null, {
//FROM
from: {
opacity: 1,...
234 просмотров
schedule
09.05.2023
