时间戳

首页 > 解决方案 > 如何使用内联样式来使用变换：rotate() 与 react.js 滚动

javascript - 如何使用内联样式来使用变换：rotate() 与 react.js 滚动

问题描述

创建此页面。我有一个要在滚动时旋转的元素。宁愿使用反应语法来创建这个“动画”。

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

这可以为图像提供背景，但不适用于该滚动。所以我想知道我做错了什么？

标签： javascriptcssreactjs

解决方案

旋转与您的半径编号transform: rotate({n}deg)在哪里一起工作。{n}其余的，在 useEffect 挂钩中将事件侦听器绑定到窗口。无需更新divStyle对象，只需创建对图像的引用并更新style.transform属性。

React 没有聪明的方法来处理这个问题，所以有时你只需要使用一些 vanilla 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}
    />
  )
}

推荐阅读