关于csstransition和react.createportal

Question

interface Props {
  visible: boolean
}

const modal: React.FC<Props> = (props: Props) => {
  const { visible } = props;
  const result = visible ? <>
    { visible ? <div className="dialog-mask" /> : null }
    <Transition in={visible} timeout={500} animation="slide-in-bottom">
      <div className="dialog-modal">
        contents
      </div>
    </Transition>
  </>
  :
  null;

  return ReactDOM.createPortal(result, document.body);
};

老师用这个transition component我写了一个对话框modal，但是发现这个没有css动画，难道是因为用了ReactDOM.createPortal的原因吗？

Answer 1

张轩 2020-04-21 10:17:11

同学请问 没有使用 portal 的时候 动画是否正常出现呢？

• 提问者 litacheng #1

  老师你好，不实用portal的话动画是可以出现的。
  感觉csstransition和portal是不是有些不兼容，毕竟portal把parent移到别的地方去了，但是这个需求感觉又是蛮普通的，真不知道该怎么办。