在重新渲染时隐藏的react组件上设置变换动画

Question

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

代码片段如下所示：

`
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.3s的动画来隐藏它。

对此有什么看法？

Answer 1

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

每当您在状态之外单击时，都必须将状态中的转换设置为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}
                 /> 
      }
    )
  }
}`

Answer 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>

  );
};