gpt4 book ai didi

javascript - 如何使用内联样式在滚动时使用变换 : rotate() with react. js

转载 作者:行者123 更新时间:2023-12-03 07:12:52 26 4
gpt4 key购买 nike

创建此页面。我有一个要在滚动时旋转的元素。宁愿使用 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 Hook 中将事件监听器绑定(bind)到窗口。而不是更新 divStyle对象,只需创建对图像的引用并更新 style.transform属性(property)。
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}
/>
)
}

关于javascript - 如何使用内联样式在滚动时使用变换 : rotate() with react. js,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/64092877/

26 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com