React JS:如何为条件渲染的组件制作动画? [英] React JS: How to animate conditionally rendered components?
问题描述
示例是一个功能组件,其中有条件地渲染了 div
。我希望在有条件渲染时将此 div
变为淡入,反之亦然。淡入。
Example is a functional component in which I am rendering a div
conditionally. I want this div
to fade-in when rendered conditionally and fade-out vice versa.
为此,我维护了两个局部状态变量: render
和 fadeIn
这是根据传给示例组件的 show
道具计算的。
For that, I have maintained two local state variables: render
and fadeIn
which are computed based on show
prop passed down to the Example component.
我所做的是:
-
显示时 c将其设置为 true ,将
render
设置为 true ,因此将div
有条件地渲染,并且在10ms
超时后,我将fadeIn
设置为 true 会将我的div的CSS类名设置为show
。 - 当
show
时它 false ,我将fadeIn
设置为 false ,这会将我的div的CSS类名设置为隐藏
,并且在200ms
超时(CSS中的转换时间)后,我将将
渲染为 false ,因此div
有条件地被隐藏。
- When
show
prop it true, I setrender
as true, so thediv
renders conditionally and after a timeout of10ms
I setfadeIn
as true which will set CSS classname for my div asshow
. - When
show
prop it false, I setfadeIn
as false, which will set CSS classname for my div ashide
and after a timeout of200ms
(transition time in CSS) I setrender
as false so thediv
is hidden conditionally.
代码:
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;
}
我认为这不是很好的编码习惯以实现该功能,并且应仅在我的组件中维护一个本地状态。我需要您的建议,说明如何以更好的方式 而不使用任何第三方库来解决此问题。
谢谢:)
I believe this is not a good coding practice to achieve the functionality and should maintain only one local state in my component. I need your suggestions on how I can solve this in a better way without using any 3rd Party Library. Thanks :)
推荐答案
const [render, setRender] = useState(false);
useEffect(() => {
if(show) {
setTimeout(() => {
setRender(true);
}, 2000);
} else {
setRender(false);
}
}, [show]);
<div className={cs(s.render, render ? 'show' : undefined)}>
<p>{content}</p>
</div>
Css:
.render {
...,
visibility: hidden;
opacity: 0;
transition: all 0.6s ease;
}
.show {
visibility: visible;
opacity: 1;
}
希望有帮助。
这篇关于React JS:如何为条件渲染的组件制作动画?的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!