React JS:如何为条件渲染的组件设置动画? [英] React JS: How to animate conditionally rendered components?

查看:41
本文介绍了React JS:如何为条件渲染的组件设置动画?的处理方法,对大家解决问题具有一定的参考价值,需要的朋友们下面随着小编来一起学习吧!

问题描述

Example 是一个功能组件,我在其中有条件地渲染 div.我希望这个 div 在有条件地呈现时淡入,反之亦然淡出.

为此,我维护了两个本地状态变量:renderfadeIn,它们是根据传递给 show 的 prop 计算的strong>示例组件.

我所做的是:

  • show 支持 true 时,我将 render 设置为 true,因此 div 有条件地呈现,在 10ms 超时后,我将 fadeIn 设置为 true,这会将我的 div 的 CSS 类名设置为 show.
  • show 支持 false 时,我将 fadeIn 设置为 false,这将为我设置 CSS 类名div 为 hide 并且在 200ms 超时(CSS 中的转换时间)后,我将 render 设置为 false 所以div 有条件地隐藏.

代码:

接口道具{显示:布尔值;}const 示例:React.FC= ({ 显示, }) =>{const [render, setRender] = useState(false);const [fadeIn, setFadeIn] = useState(false);useEffect(() => {如果(显示){//有条件地渲染组件设置渲染(显示);//将状态更改为条件 CSS 类名,这将//动画不透明度,我必须给出 10 毫秒的超时时间,否则//组件突然出现setTimeout(() => {设置淡入(显示);}, 10);} 别的 {//更改状态以更改不透明动画的组件类名设置淡入(假);//200 毫秒后有条件地隐藏组件//因为那是 CSS 中的过渡时间setTimeout(() => {设置渲染(假);}, 200);}}, [展示,]);返回 (<div>{渲染&&(<div className={`容器 ${fadeIn ?'显示':'隐藏'}`}/>)}

);};

样式表:

.container {宽度:100px;高度:100px;背景颜色:黑色;过渡:不透明度 0.2s 缓和;}.展示 {不透明度:1;}.隐藏 {不透明度:0;}

我认为这不是实现功能的好的编码实践,并且应该在我的组件中只维护一个本地状态.我需要您的建议,以了解如何以更好的方式 在不使用任何 3rd 方库的情况下解决此问题.谢谢:)

解决方案

const [render, setRender] = useState(false);useEffect(() => {如果(显示){setTimeout(() => {设置渲染(真);}, 2000);} 别的 {设置渲染(假);}}, [展示]);<div className={cs(s.render, render ? 'show' : undefined)}><p>{内容}</p>

CSS:

.render {...,可见性:隐藏;不透明度:0;过渡:所有 0.6s 缓和;}.展示 {可见性:可见;不透明度:1;}

希望对您有所帮助.

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.

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.

What I've done is:

  • When show prop it true, I set render as true, so the div renders conditionally and after a timeout of 10ms I set fadeIn as true which will set CSS classname for my div as show.
  • When show prop it false, I set fadeIn as false, which will set CSS classname for my div as hide and after a timeout of 200ms (transition time in CSS) I set render as false so the div is hidden conditionally.

Code:

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>
  );
};

Stylesheet:

.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;
}

Hope be helpful.

这篇关于React JS:如何为条件渲染的组件设置动画?的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!

查看全文
相关文章
前端开发最新文章
热门教程
热门工具
登录 关闭
扫码关注1秒登录
发送“验证码”获取 | 15天全站免登陆