关于csstransition和react.createportal

首页课程实战体系课手记专栏慕课教程

关于csstransition和react.createportal

来源：7-9 拿来主义 - 自定义 Transition 组件编码第二部分

litacheng

2020-04-20

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的原因吗？

写回答

1回答

张轩

2020-04-21

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

0

1

litacheng

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

2020-04-21

共1条回复

React18+TS高仿AntD从零到一打造组件库

设计，开发，测试，发布再到 CI/CD，从0到1造轮子

2123 学习 · 959 问题

相似问题

加入 <CSSTransition> 后警告

回答 2

在submenu中使用Transition 组件后获取 drop1 元素为空了

回答 1

请教老师一个关于业务的问题

回答 1

关于职业规划

回答 1

关于react-hooks 和类组件写法

回答 1

打开慕课网App查看更多内容