如何使用內聯樣式在滾動時使用 transform: rotate() 和 react.js

Question

創建此頁面。 我有一個要在滾動時旋轉的元素。 更願意使用反應語法來創建這個“動畫”。

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/>  
}

這可以為圖像提供背景，但不適用於該滾動。 所以我想知道我做錯了什么？

Answer 1

旋轉與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}
    />
  )
}