javascript - 我在重新渲染时隐藏的 react 组件上的动画过渡

Question

我正在使用 reactjs 并且我有一个日期选择器组件，当用户在组件元素外部单击时我会隐藏它。

代码片段是这样的:

`
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 秒的动画隐藏它。

对此有何看法？

Answer 1

我的回答与之前的回答不同的是，您可以为某些动画关键帧设置特定的 Action 。

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

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>

  );
};