0

我目前正在使用 Portals 在我的应用程序中实现模态组件。我想要实现的是，当 Modal 组件被渲染时，它应该淡入，当它不再渲染时，它应该淡出。

查看 react-transition-group 文档，似乎必须使用道具才能实现这一目标，但是我想要一个没有任何形式的状态或道具的解决方案。考虑：

<App>
<Modal />
</App>

应用程序应该正常加载，但是 Modal 应该淡入。当 Modal 不再基于这些组件之上的某些条件呈现时，它应该淡出。

这是实际的代码

import Fade from "../Fade";
import { TransitionGroup } from "react-transition-group";

const Modal = ({ children, ...other }) => {

return (
<Portal>
  <TransitionGroup>
    <Fade>
      {children}
    </Fade>
  </TransitionGroup>
</Portal>
);
};

对于 Fade 组件：

import { CSSTransition } from 'react-transition-group';

const Fade = ({ children, ...other }) => (

<CSSTransition
{...other}
timeout={500}
classNames={{
  //my classes here
}}
>
{children}
</CSSTransition>
);

有什么建议吗？我确信这曾经有效，在 React 16 和 react-css-transitions 更改为 react-transition-group 之前，但我很难弄清楚这一点。

需要明确的是，我可以使用状态/道具进行转换并有一个工作示例，但这不是我想要实现的。我想在渲染时淡入，在未渲染时淡出...

谢谢！

4

1 回答 1

2 
appear={true}

现在似乎解决了这个问题，虽然没有办法为反向设置动画（组件被卸载）。

于 2018-01-25T14:33:15.787 回答