Example是一个功能组件,其中有条件地渲染了div
。我希望此div
在有条件渲染时显示为fade-in,反之亦然。[
render
和fadeIn
,它们是根据传递给示例
组件的show
属性计算的。我所做的是:
show
支持它render
设置为true,因此div
有条件地渲染,并且在10ms
超时后,我将fadeIn
设置为true] 会将我的div的CSS类名设置为show
。当show
支持它[[false时,我将fadeIn
设置为hide
,并且在200ms
超时后( CSS)我将render
设置为false,因此div
有条件地隐藏。interface Props {
show: boolean;
}
const Example: React.FC<Props> = ({ show, }) => {
const [render, setRender] = useState(false);
const [fadeIn, setFadeIn] = useState(false);
useEffect(() => {
if (show) {
// render component conditionally
setRender(show);
// change state to for conditional CSS classname which will
// animate opacity, I had to give a timeout of 10ms else the
// component shows up abruptly
setTimeout(() => {
setFadeIn(show);
}, 10);
} else {
// change state to change component classname for opacity animation
setFadeIn(false);
// hide component conditionally after 200 ms
// because that's the transition time in CSS
setTimeout(() => {
setRender(false);
}, 200);
}
}, [
show,
]);
return (
<div>
{render && (
<div className={`container ${fadeIn ? 'show' : 'hide'}`} />
)}
</div>
);
};
样式表:
.container {
width: 100px;
height: 100px;
background-color: black;
transition: opacity 0.2s ease;
}
.show {
opacity: 1;
}
.hide {
opacity: 0;
}
我相信这是不是很好的编码习惯
,以实现功能,并且应该在我的组件中仅维护一个局部状态。我需要您的[[建议
更好的方式 不使用任何第三方库]来解决此问题。谢谢:)
[示例是一个功能组件,其中有条件地渲染了div。我希望此div在有条件渲染时淡入,反之亦然。为此,我维护了两个本地....render {
...,
visibility: hidden;
opacity: 0;
transition: all 0.6s ease;
}
.show {
visibility: visible;
opacity: 1;
}
希望有帮助。