Блог

Создание этой страницы. У меня есть элемент, который я хочу повернуть при прокрутке. Предпочел бы использовать синтаксис react для создания этой «анимации».

 LeftGear = () =>  {
const rotate = window.scrollY / 10 % Math.PI

const divStyle = {
  backgroundColor: 'purple',
  transform: `scroll(${rotate})`,
}

return  <img
          className={this.changeClassName('circleImage')}
          src="../../assets/icons/red-gear.svg"
          alt="Circles Icon"
          style={divStyle}
        />
}

render(){
  return <LeftGear/>  
}
  

это работает, чтобы придать изображению фон, но не работает для этой прокрутки. Итак, мне интересно, что я делаю не так?

Вращения работают с transform: rotate({n}deg) {n} номером вашего радиуса. В остальном привяжите прослушиватель событий и прослушиватель событий к окну с помощью перехвата useEffect. Вместо обновления divStyle объекта просто создайте ссылку на изображение и обновите style.transform свойство.

У React нет разумного способа справиться с этим, поэтому иногда вам просто нужно использовать какой-нибудь ванильный JS.

 import React, { useEffect, useRef } from 'react';

const LeftGear = () => {
  const imageRef = useRef();
  const divStyle = {
    backgroundColor: 'purple',
  }

  useEffect(() => {
    window.addEventListener('scroll', event => {
      requestAnimationFrame(() => {
        const rotation = window.scrollY / 10 % Math.PI;
        imageRef.current.style.transform = `rotate(${rotation}deg)`;
      });
    });
  }, []);

  return (
    <img
      ref={imageRef}
      className={this.changeClassName('circleImage')}
      src="../../assets/icons/red-gear.svg"
      alt="Circles Icon"
      style={divStyle}
    />
  )
}