const animate_boxes = () => {
inner_ref.current.style.transform = "scale(0)";
setTimeout(() => {
if (inner_ref && inner_ref.current) {
inner_ref.current.style.transform = "scale(1)";
}
}, 200);
};
useEffect(() => {
animate_boxes();
}, [trigger])
目前，我就是這樣做的。
這是標準/良好實踐方式嗎？如果沒有，我如何重新撰寫上面的代碼以簡化？
uj5u.com熱心網友回復：
有一個出色的基于鉤子的影片庫，稱為 react-spring，您可以單獨使用它或與手勢庫一起使用它來創建看起來自然的漂亮的基于物理的影片。不過它有一點學習曲線，這是圖書館的網站
uj5u.com熱心網友回復：
影片的另一種方式是使用帶有反應狀態和行內樣式的 CSS 過渡屬性：
https://codesandbox.io/s/react-playground-forked-3t3p6?file=/Hello.js
import React, { useEffect, useState } from "react";
const blueSquare = {
width: "25px",
height: "25px",
backgroundColor: "blue",
transition: "opacity 0.5s, transform 3s",
margin: 20
};
const Hello = () => {
const [opacity, setOpacity] = useState(1);
const [transform, setTransform] = useState("translate(0,0) scale(1)");
useEffect(() => {
setTransform("translate(100px, 150px) scale(8)");
setTimeout(() => {
setTransform("translate(300px, 150px) scale(8)");
}, 3000);
}, []);
return (
<div>
<button
onClick={() => setOpacity((prevState) => (prevState === 1 ? 0 : 1))}
>
Animate Opacity
</button>
<div style={{ ...blueSquare, transform, opacity }} />
</div>
);
};
export default Hello;
但正如布蘭登提到的，如果你想做復雜的影片，那么研究 react-spring 很可能會更容易。
轉載請註明出處，本文鏈接：https://www.uj5u.com/ruanti/336575.html
標籤：javascript html css 反应 前端