Question

我目前正在使用门户网站在我的应用中实现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之前，这曾经有用了，但我很难搞清楚这一点。

要清楚，我可以使用状态/道具进行转换，并且有一个有效的例子，但这不是我想要实现的。我想在渲染时淡入淡出，在未渲染时淡出...

谢谢！

Answer 1

appear={true}

现在似乎已经解决了这个问题，虽然没有办法为反向设置动画（组件未安装）。

react-transition-group transition初始渲染没有props / state

1 个答案: