react-transition-group 过渡初始渲染，没有道具/状态答案

【问题标题】：react-transition-group transition initial render without props/statereact-transition-group 过渡初始渲染，没有道具/状态
【发布时间】：2018-07-04 18:21:52
【问题描述】：

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

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

<App>
<Modal />
</App>

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 之前，我确信这曾经有效，但我很难弄清楚这一点。

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

谢谢！

【问题讨论】：

标签： css reactjs animation react-transition-group

【解决方案1】：

appear={true}

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

【讨论】：