【问题标题】：Animate transition on a react component that i hide on re-render我在重新渲染时隐藏的反应组件上的动画过渡
【发布时间】：2019-06-26 18:36:14
【问题描述】：

我正在使用 reactjs，并且我有一个 datepicker 组件，当用户在组件元素之外单击时我会隐藏它。

代码sn-p是这样的：

`
class DatePicker extends Component{
   constructor(props){
      super(props)
      state= { focus: false }  // when focus: false i hide the dates component 
  }    
  .......
  render(){
    const { focus } = this.state

    return(
      <input type="text" placeholder="start date">
      <input type="text" placeholder="start date">
      {focus &&  <DatesContainer ...props>} // if focus==false i dont show the <DatesContainer> component.I need to hide it with fade out or something.
    )
  }
}`

因此，当用户在<DatesContainer/> 之外单击时，state.focus 会更新为 false，重新渲染，这一次，<DatesContainer/> 根本没有渲染，到目前为止一切都很好。但我需要用 0.3 秒的动画来隐藏它。

对此有何看法？

【问题讨论】：

标签： javascript jquery css reactjs

【解决方案1】：

我会更新状态以拥有 transitioning 属性。使用 CSS 动画或过渡以及一些条件渲染，我们可以将新类应用到 DatesContainer，检测动画何时完成并将焦点状态更改为 false。

您必须在状态中将transitioning 设置为true，只要您在其外部单击。

它可能看起来像这样：

CSS

@keyframes fadeOut {
    0% {
        opacity: 1;
    }
    100% {
        opacity: 0;
    }
}

.fading {
    animation-name: fadeOut;
    animation-duration: 0.3s;
    animation-fill-mode: forwards;
    will-change: opacity;
}

JS

//import your styles here

class DatePicker extends Component{
   constructor(props){
      super(props)
      state= { focus: false, transitioning: false }
  }    

  handleFade() {
    this.setState({transitioning: false})
  }

  render(){
    const { focus, transitioning } = this.state

    return(
      <input type="text" placeholder="start date">
      <input type="text" placeholder="start date">
      {focus &&  <DatesContainer 
                   className={transitioning === true ? "fading" : null} 
                   onAnimationEnd={transitioning === true ? () => this.handleFade() : null}
                 /> 
      }
    )
  }
}`

【讨论】：

但是，在 render() 内部，如果焦点为 false，则 && 根本不会渲染。它会消失的。
@TheoItzaris 是的，这是真的，但是你有一个函数来处理将焦点更改为真正的正确吗？它将在那里渲染，然后当焦点丢失时，它应该将转换设置为 true，这将产生淡入淡出效果。在handleFade 中，您还可以将focus 设置回false。

【解决方案2】：

我的回答和之前的不同之处在于你可以为某些动画关键帧设置特定的动作。

关键是提供动画名称作为函数参数

CSS

.Modal {
    position: fixed;
    top: 30%;
    left: 25%;
    transition: all 0.3s ease-out;
}
.ModalOpen {
    animation: openModal 0.4s ease-out forwards;
}
.ModalClosed {
    animation: closeModal 0.4s ease-out forwards;
}

@keyframes openModal {
    0% { transform: translateY(-100%); }
    100% { transform: translateY(0);   }
}

@keyframes closeModal {
    0% { transform: translateY(0); }
    100% { transform: translateY(-100%);}
}

JS

const modal = ({ 
  isShown, isMounted, 
  initiateUnmountAction, unmountAction
}) => {
  const cssClasses = [
    "Modal",
    props.isShown ? "ModalOpen" : "ModalClosed"
  ];
  return (
    <Fragment>
      {isMounted && <div className={cssClasses.join(' ')}
        onAnimationEnd={event => 
          {event.animationName == "closeModal" && unmountAction}
      }>
        <h1>A Modal</h1>
        <button className="Button" onClick={initiateUnmountAction}>
          Dismiss
      </button>
      </div>}
    </Fragment>

  );
};

【讨论】：