[英]useEffect not getting dependency value updated
我有一个要动态编辑某些样式的组件。 当我进入组件时,我希望它顺利增长,而当我离开时,我希望它顺利缩短。
这是我的代码:
const easing = 0.1;
const outScale = 0.6;
const inScale = 1;
let targetScale = outScale;
let elementScale = targetScale;
let innerScale = 1 / elementScale;
const [parentTransformStyle, setParentTransformStyle] = useState(
`scale(${elementScale})`
);
const [innerTransformStyle, setInnerTransformStyle] = useState(
`scale(${innerScale})`
);
const requestRef = useRef();
const onPointOverEvent = () => {
targetScale = inScale;
console.log("over", inScale, targetScale);
};
const onPointerOutEvent = () => {
targetScale = outScale;
console.log("out", outScale, targetScale);
};
const animate = () => {
console.log("animate", targetScale);
elementScale += (targetScale - elementScale) * easing;
innerScale = 1 / elementScale;
setParentTransformStyle(`scale(${elementScale})`);
setInnerTransformStyle(`scale(${innerScale})`);
requestAnimationFrame(animate);
};
useEffect(() => {
requestRef.current = requestAnimationFrame(animate);
return () => cancelAnimationFrame(requestRef.current);
}, []);
变量targetScale
应该在鼠标悬停在元素中和鼠标离开元素时更新。
如果我在事件侦听器中打印值,则该值是正确的。 但是在animate
函数内部,它具有初始值。 有人可以指出我缺少的东西吗?
有什么理由不能使用 CSS 转换而不是自己制作动画?
例子:
function MyComponent() { const [innerTransformStyle, setInnerTransformStyle] = React.useState( `scale(${0.6})` ); const onPointOverEvent = () => { setInnerTransformStyle(`scale(${1})`); }; const onPointerOutEvent = () => { setInnerTransformStyle(`scale(${0.6})`); }; return ( <div className="parent"> <div className="element" style={{transform: innerTransformStyle}} onPointerOut={onPointerOutEvent} onPointerOver={onPointOverEvent}></div> </div> ); } ReactDOM.render(<MyComponent/>, document.getElementById("app"));
.parent { width: 100px; height: 100px; background-color: #f00; } .element { width: 100px; height: 100px; background-color: #0f0; transition: transform 1s; }
<script src="https://unpkg.com/react@16/umd/react.development.js" crossorigin></script> <script src="https://unpkg.com/react-dom@16/umd/react-dom.development.js" crossorigin></script> <div id="app"></div>
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.