Question

我创建了一个随动画淡入的模态组件，但是我不知道如何在消除模态时创建相同的（反向）淡出的动画。

当相关状态改变时，将显示模态，然后使用其子级渲染模态：

{this.state.showModal && (
    <Modal>
        <p>this is the content of the modal</p>
    </Modal>
)}

（CSS）中的淡入淡出模式的动画：

.Modal {
    animation: animModal 400ms ease-in-out;
    opacity: 0;
    animation-fill-mode: forwards;
  }

  @keyframes animModal {
    0% {
      transform: translate(-400%, -50%);
      opacity: 0;
    }
    100% {
      transform: translate(-50%, -50%);
      opacity: 1;
    }
  }

但是当模态消失时，当然就没有动画了。

一种解决方案是始终渲染模态，但仅在某些情况下使其可见：

const modal = (props) => (
        <Auxiliery>
            <div className={classes.Modal} 
            style={{transform: props.show ? 'translate(-50%, -50%)' : 'translate(-400%, -50%)', opacity: props.show ? '1' : '0'}}>
                {props.children}
            </div>
        </Auxiliery>
)

在显示模式的组件中：

<Modal show={this.state.showModal}>
    <p>content of the modal</p>
</Modal>

因此，模态始终存在并且只是隐藏。但是我的这种方法的问题在于，总是会渲染模态，有时我放到模态中的内容可能很大，因此仅在需要时渲染组件的整个方面都会受到影响。

你会做什么？

预先感谢

ReactJS动画解散模态

0 个答案: