ReactJS ReactCSSTransitionGroup 仅在初始加载时动画

Question

我正在尝试在我的 React / Redux 应用程序中设置路由更改的动画转换。我一直在使用 SO 上的示例和官方教程作为指南，但到目前为止只能使淡入效果在第一次加载时起作用。更改路线时，组件显示时没有任何动画进出。

我是否遗漏了一些明显的东西 - 这是尝试为内容输入/输出动画时遵循的最佳路径吗？

/*
**  Loop through ACF components to layout page
*/

blocks = () => {
 if (this.props.pages.pages[0]) {
  return this.props.pages.pages[0].acf.components &&
    this.props.pages.pages[0].acf.components.map((block, index) => {
      let Component = componentMapping[block.acf_fc_layout];
      return <Component key={index} data={block} id={index} />;
    });
  }
};

/*
**  Render page on state change
*/

render() {
 return (
  <div className="App">
    <NavContainer />
    <ReactCSSTransitionGroup
      transitionName="example"
      transitionAppear={true}
      transitionAppearTimeout={500}
      transitionEnterTimeout={500}
      transitionLeaveTimeout={300}
    >
      {this.blocks()}
    </ReactCSSTransitionGroup>
  </div>
 );
}

我包含的css如下：

.example-enter {
 opacity: 0.01;
}

.example-enter.example-enter-active {
 opacity: 1;
 transition: opacity 500ms ease-in;
}

.example-leave {
 opacity: 1;
}
.example-appear {
 opacity: 0.01;
}

.example-appear.example-appear-active {
 opacity: 1;
 transition: opacity .5s ease-in;
}
.example-leave.example-leave-active {
 opacity: 0.01;
 transition: opacity 300ms ease-in;
}

感谢任何人提供的任何帮助。提前致谢！

Answer 1

让我们通过一些故障排除步骤来深入了解这一点，但首先，让我给你一些关于 ReactCSSTransitionGroup 组件如何工作的基本提示。

<ReactCSSTransitionGroup/> 需要出现在页面上，并在装载后添加和删除它的子级。例如您有一个基于输入框过滤的员工列表。由于过滤器控制添加和删除的内容，这些项目来来去去并被动画化。 <ReactCSSTransitionGroup/> 必须首先存在并且必须安装组件。

使用 React Router，您可以在更改路由时安装和卸载组件。如果<ReactCSSTransitionGroup/> 位于每个正在安装和卸载的组件内，则转换不会触发。我想这就是你正在经历的。我建议您试试这个NPM package 来帮助您处理路线变化的动画。

动画只触发一次的问题是与上述不同的问题。我担心这部分：

return this.props.pages.pages[0].acf.components &&
    this.props.pages.pages[0].acf.components.map((block, index) => {
        let Component = componentMapping[block.acf_fc_layout];
        return <Component key={index} data={block} id={index} />;
    });

使用 && 运算符返回一个变量会给你带来有趣的结果。尝试做一些明确的if 语句。或者老实说，只需将您的代码更改为：

if (this.props.pages.pages[0]) {
    return this.props.pages.pages[0].acf.components.map((block, index) => {
        let Component = componentMapping[block.acf_fc_layout];
        return <Component key={index} data={block} id={index} />;
    });
}

我的另一个想法是看看当您省略该组件创建 (componentMapping[block.afc_fc_layout]) 并返回 <div> 时会发生什么。看看会发生什么，看看是不是给你带来了麻烦。