[英]How to use inline styles to use transform: rotate() with react.js on scroll
创建此页面。 我有一个要在滚动时旋转的元素。 更愿意使用反应语法来创建这个“动画”。
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}
/>
)
}
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.