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

Тег, используемый для React Pose, библиотеки анимации для React от Popmotion.
0 ответов

Как использовать ответную позу с @reach/router в React Typescript?

В моем приложении React я пытаюсь конвертировать JS react-pose - @reach/router Пример для TypeScript, но это не работает. Вот соответствующие наборы в react-pose: import { ComponentType, HTMLProps } from 'react'; import { PoseElementProps } from './…
1 ответ

Анимация реактивной позы мигает на горе

У меня есть следующий код, который должен визуализировать простое затухание анимации для Container компонент через 3 секунды. Тем не менее, компонент мигает полностью видимым, прежде чем исчезнуть. Мой вопрос: почему это происходит, и как я могу ост…
1 ответ

Цикл и трансформация SVG между двумя путями

Я использую Popmotion, Pose и flubber для трансформации и перехода два paths SVG между изменениями React Route. Это прекрасно работает как import posed from 'react-pose'; import { tween, easing } from 'popmotion'; import { interpolate } from 'flubbe…
20 фев '19 в 23:55
0 ответов

Анимированные отступы на div при использовании реакции-позы

В своем приложении реагирования я пытаюсь анимировать круглую кнопку, чтобы она стала прямоугольной с полем ввода внутри. Вот код: import React from "react"; import ReactDOM from "react-dom"; import posed from "react-pose"; import { FontAwesomeIcon …
29 май '19 в 09:56
0 ответов

Есть ли способ заполнить определенную функцию в Babel с помощью preset-env?

У меня есть проект React, который я создаю с помощью Webpack, Babel и React. Я сейчас пользуюсь useBuiltIns: "usage" чтобы уменьшить размер пачки. Я также использую реагирующую позу для анимации, которая требует строгого добавления WeakSet polyfill …
1 ответ

Реакция состояния позы влияет на позы дочерних компонентов

Я пытаюсь создать компонент в реакции, который рушится и расширяется при необходимости. Для этого я использую реагирующую позу. Тем не менее, я сталкиваюсь с проблемами при попытке вложить несколько из этого компонента. Вот как я определяю свой комп…
07 мар '19 в 15:05
2 ответа

Как реализовать простую анимацию реагирования js с позой реагирования без узла js?

Я новичок в реакции JS. Недавно я просмотрел документацию по реагированию на js и документацию о реагировании. Я реализовал следующий фрагмент. Но когда я запускаю его, это не влияет на браузер. Где я не прав? <html> <head> <style>…
14 мар '19 в 12:31
1 ответ

Простой переход непрозрачности поза реакции не работает

Я новичок в react-pose и я пробую простую вещь, но переход не работает. Я только хочу иметь переход между двумя состояниями. подобно opacity 0 => 1 Я хочу использовать его с const, поэтому я использую новый реагирующий хук. import React, { useSta…
0 ответов

Как сделать Переход Реактивной Позы, основанный на изменении состояния

Я экспериментировал с React Pose всего несколько дней, и хотя мне это очень нравится, я борюсь с переходами. ... let value = (step.current_step * 100); let gutter = value === 0 ? 0 : value === 100 ? 16 : 32; const Stepper = posed.div({ 0: { x: `calc…
29 мар '19 в 16:43
1 ответ

Как заставить реактивную позу работать с компонентами класса?

Я следовал за документацией и этим сообщением в блоге, но я изо всех сил пытаюсь заставить что-нибудь работать. Локально я получаю следующую ошибку: HEY, LISTEN! No valid DOM ref found. If you're converting an existing component via posed(Component)…
10 апр '19 в 20:56
1 ответ

Реактивная поза: Как определить типы реквизита в реактивной позе? (реквизит неявно имеет любой тип)

Я использую TypeScript с реактивной позой и мне нужно определить типографию для реквизита. Это приложение, с которого я только что начал create-react-app версия 3.0.1. Я получаю ошибку Parameter 'props' implicitly has an 'any' type. Я попытался опре…
09 май '19 в 13:20
0 ответов

Компонент анимации реакции на обновление

Я сопоставляю массив пользователей: users.map((user) => <div>{user}</div>) Когда пользователь добавляется в массив, компонент обновляется. Я хочу анимировать пользователя (единственного числа), который добавляется в конец массива. Я н…
19 мар '19 в 16:25
0 ответов

React Router + React Pose слайд в / из с направлением "POP" или "PUSH"

У меня была эта проблема больше месяца, я снова и снова возвращался к ней с новыми идеями, но я не могу обернуться вокруг решения. Там должен быть один, это тривиально! Моя цель - как обычно сдвигать страницы слева и скользить вправо. Когда он перев…
0 ответов

Есть ли способ адаптировать эффект зависания этого popmotion для мобильных устройств?

Код : https://codesandbox.io/s/react-pose-hover-k7mih Демо: https://k7mih.csb.app/ фрагмент кода: const Box = posed.div({ hoverable: true, pressable: true, init: { filter: "grayscale(80%) blur(2px)", scale: 1 }, hover: { filter: "grayscale(0%) blur(…
20 авг '19 в 02:46
0 ответов

Как изменить размеры (уменьшить) существующие div при использовании React-Pose

У меня есть четыре столбца на домашней странице. Вот что я пытаюсь сделать... Я приведу в качестве примера только анимацию первого столбца, для краткости. Если я щелкну первый столбец (используя React-Pose "нажимаемое"), он изменит размер до 75% про…
08 июн '19 в 23:24
0 ответов

Мне нужно, чтобы мой фон прокручивался вверх, когда вы прокручиваете React-Pose

Я работаю с React и React Pose, моя цель состоит в том, чтобы полоса прокрутки не появлялась, чего у меня сейчас нет. Но когда вы прокручиваете его, чтобы сказать "onScroll" или что-то в этом роде, фон автоматически переходит в положение и появляетс…
0 ответов

Как создать "поп" анимацию, которая не является переходом между двумя состояниями?

Я только начал изучать анимационную библиотеку Pose для React от Popmotion. Эффект анимации, который я пытаюсь реализовать, не описан в руководствах, и я ищу руководство о том, как думать о проблеме. Представьте себе кнопку, которая увеличивает счет…
28 июн '19 в 21:27
1 ответ

Дочерний элемент заданного элемента не реагирует на изменения позы

AnimDiv не меняет свой стиль, поскольку poseпеременные изменения. Тот же подход будет работать с родителем, однако дочерний элемент, кажется, принимает только начальное значение того, что было передано ему.pose, то не заботится об этом при последующ…
03 сен '19 в 21:25
1 ответ

реакция-поза задержка перехода высоты группы позы до тех пор, пока не появятся дети

const Item = posed.div({ enter: {x: 0, opacity: 1}, exit: {x: 1000, opacity: 0} }); <PoseGroup> <Item key={whatever}></Item> </PoseGroup> В настоящее время, когда я удаляю элемент из списка, div группы позы становится короче,…
1 ответ

Поза React - анимация справа, выход слева

Сейчас я играю с позой React. Что я пытаюсь сделать, так это анимировать разные блоки справа и выйти из них слева. Однако я не могу понятьpreEnterPoseработать так, как я хочу. Кажется, что по умолчанию всегда используется поза выхода. Как я могу зас…
26 ноя '19 в 08:47