如何在react js中为固定位置的div设置动画

Question

我有一个头部组件，它在用户向下滚动后获得固定类，如下所示：

const [show, setShow] = React.useState(false);
const handleShow = () => {
if (typeof window !== "undefined") {
if (window.pageYOffset > 120) {
if (!show) {
console.log("set to true");
setShow(true);
}
}
if (window.pageYOffset < 120) {
console.log("set to false");
setShow(false);
}
}
};
React.useEffect(() => {
if (typeof window !== "undefined") {
window.addEventListener("scroll", handleShow);
}
return () => {
if (typeof window !== "undefined") {
window.removeEventListener("scroll", handleShow);
}
};
}, []);
return (
<div
className={show ? classes.fixed : ""}
style={{
background: bgColor,
boxShadow: "0 0 10px #ccc",
}}
>
<div className="d-flex justify-content-center">
<div>Header</div>
</div>
</div>

固定类的css代码是：

.fixed {
position: fixed;
transition: all 0.3s;
z-index: 1000;
width: 100%;
}

它固定在顶部，但过渡不起作用，我希望通过某种动画将标题固定在顶部。

如何在div的位置固定的情况下设置动画？

Answer 1

您可以添加惰性移动动画。不使用position: fixed;，而是使用position:absolute，在窗口的每个滚动端捕获滚动增量并将其设置为div。伪代码如下：

• 追加滚动事件
• 在每个滚动结束时，捕捉Y滚动位置
• 现在在具有position: absolute;的div(标头(上设置捕获的Y滚动位置

如果这听起来让你感到困惑，请告诉我，然后我也可以共享代码。

希望这有帮助：(

Answer 2

我解决了将类应用到div:的问题

<div
className={
show ? `${classes.navbar} ${classes.navbarSticky}` : classes.navbar
}
style={{
background: bgColor,
boxShadow: "0 0 10px #ccc",
}}
>
<div className="d-flex justify-content-between p-4">
<div>{left}</div>
<div>{right}</div>
</div>
{bottom}
</div>

样式为：

.navbar {
position: absolute;
z-index: 1;
width: 100%;
background: red;
}
.navbarSticky {
background: #333;
position: fixed;
top: 0;
left: 0;
animation: moveDown 0.5s ease-in-out;
}
@keyframes moveDown {
from {
transform: translateY(-5rem);
}
to {
transform: translateY(0rem);
}
}
@keyframes rotate {
0% {
transform: rotateY(360deg);
}
100% {
transform: rotateY(0rem);
}
}