Описание тега react-intersection-observer

1 ответ

React-Spring как правильно анимировать буквы массива

В этом коде с react-spring Я получаю анимацию, в которой каждая буква ждет, пока не закончится предыдущая анимация, а также тем временем она анимируется Почему это происходит и как это исправить? const text = [...'hey there how are you'] const from …
1 ответ

ReactJS - как использовать наблюдатель пересечения в компоненте класса?

Мне удается использовать react-intersection-observerв функциональном компоненте. Однако мне не удалось использовать его с компонентом класса. Я пытался следовать документации, но получаю следующую ошибку: Invariant failed: react-intersection-observe…
0 ответов

реагировать-пружина и реагировать-пересечение-наблюдатель - тонны перерисовок

JSFiddle Код: export default function App() { const spring = useSpring({ from: { opacity: 0 }, to: { opacity: 1 } }); const [ref] = useInView(); rerenders++; return ( <div style={{ height: "200vh" }}> <div style={{ height: "1…
1 ответ

Невозможно обновить компонент изнутри тела функции другого предупреждения компонента

Я написал компонент под названием component1, как показано ниже, и он находится внутри родительского компонента. Компонент 1 находится внизу страницы, и я не хочу отображать его, пока пользователь не прокрутит вниз до этой области. Таким образом, я …
2 ответа

React ref.current не определен в useLayoutEffect

Я пытаюсь реализовать POC для горизонтально прокручиваемого раздела в проекте. У меня 3 h3s рядом друг с другом над горизонтально прокручиваемым разделом, h3s должны соответствовать отдельным подразделам в горизонтальном бите. Я использую реагироват…
0 ответов

Framer Motion/React- встроенные стили создателя кадра сохраняются после передачи нового варианта компоненту движения

Работа над компонентом "Галерея", имеющим двух дочерних элементов, "GalleryImage", который анимируется с помощью Framer-Motion, когда переменная "inView" имеет значение true, которое предоставляется "useInView" из наблюдателя пересечения реакции. Мо…
1 ответ

Ошибка выхода Framer motion Animate Presence

У меня проблема с компонентом AnimatePresence framer-motion. Я пытаюсь запустить анимацию после того, как компонент станет видимым в области просмотра, для этого я использовал реакцию-пересечение-наблюдатель. Он работает так, как предполагалось для …
2 ответа

API-интерфейс Intersection Observer переходит в бесконечный цикл рендеринга

Я пытаюсь использовать API наблюдателя пересечения для условного отображения элементов в сетке CSS, когда пользователь начинает прокрутку, но, похоже, происходит бесконечный цикл рендеринга. Вот мой код. import { Portfolio } from '@/common/types'; i…
1 ответ

Использование FramerMotion useTransform Animation во вьюпорте

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

Реагировать-пересечение-наблюдатель inView родительского div, а не указанный ref

У меня есть приложение для реагирования, в котором используются «локомотив-прокрутка» и «реагирующий-перекрестный наблюдатель». В InstallationКомпонент имеет горизонтальную прокрутку с локомотивом-скроллингом. Я хочу посмотреть div'ы .video-gallery'…
0 ответов

Ошибка при перемещении фреймера React. Невозможно прочитать свойство getBoundingClientRect для undefine при использовании ловушки useAnimation

Я создаю на своем веб-сайте функцию, в которой, когда вы прокручиваете определенный элемент div (т. Е. Больше не в поле зрения, с использованием react-intersection-observer), другой элемент анимируется (используя framer-motion useAnimation() крюк) Я…
0 ответов

Наблюдатель пересечения, используемый в условном внутреннем корневом выводе в React

Я пытаюсь использовать наблюдатель пересечения для ленивой загрузки компонентов. Родительский компонент является условным и не отображается сразу, пока не будет выполнено поиск по ключевому слову. Наблюдатель пересечения должен запускаться, когда ви…
1 ответ

Как изменить фоновое видео при прокрутке в React?

Я пытаюсь изменить фоновое видео при прокрутке, используя наблюдатель-пересечение. Когда inView изменяется на true, useEffect должен изменить состояние на sample2 и отправить новое видео на стартовый экран, где оно будет использоваться в качестве фо…
12 июн '21 в 19:35
0 ответов

Как скрыть элементы из DOM, если они не отображаются в окне просмотра в React

Итак, у меня есть вариант использования, в котором у меня есть список элементов, которые необходимо отобразить. Но чтобы сэкономить на производительности, мне нужно отображать только те, которые находятся в текущем окне просмотра. Остальные элементы…
0 ответов

использование <InView> наблюдателя пересечения в реакции

У меня есть список карточек, которые я получаю от Api. Карты - это продукты, которые пользователь выбирает на предыдущей вкладке. Они должны загружаться, когда пользователь прокручивает страницу вниз. Все работает нормально. Но если пользователь про…
0 ответов

Измените цвет заголовка с прозрачного на белый с помощью наблюдателя пересечения реакции

Я пытаюсь изменить цвет фона моего заголовка, который фиксируется сверху при прокрутке на 100 пикселей сверху. Как я могу добиться этого с помощью реагирующего-пересечения-наблюдателя? Есть ли способ добавить имя класса к моему объекту, если область…
3 ответа

Как отключить анимацию движения Framer в мобильной версии?

Я пытаюсь создать веб-сайт React с помощью Framer Motion, проблема в том, что созданная мной анимация хорошо выглядит на рабочем столе, но не на мобильных. Итак, планирую отключить анимацию. Как мне это сделать?
0 ответов

Наблюдатель пересечения React не работает, когда он реагирует

Я использую реакцию-пересечение-наблюдатель, чтобы сделать некоторую анимацию, когда компонент находится в поле зрения. Он отлично работает, но когда я пытаюсь перейти на мобильный экран, например, шириной 633 пикселей и высотой 400 пикселей, он не …
0 ответов

Проблема с рендерингом в React JS, React-Crossction-Obverver и React-Tree-Fibre

В проекте, над которым я работаю, я использую реакцию. Создайте компонент «Заголовок», в котором я визуализирую 3D-модель с помощью react-three-fiber, моим вторым компонентом является «About», в который я помещаю только текст и использую react-cross…
1 ответ

реагировать-пересечение-наблюдатель не работает мобильный вид

Я пытаюсь использовать реагирование-пересечение-наблюдатель и движение кадра в сочетании друг с другом, чтобы запустить анимацию, когда компонент находится в поле зрения, с помощью хука useInView. Хотя он работает примерно с 1100 пикселей и далее, о…