javascript - 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> 时，看看会发生什么。 .看看会发生什么，看看这是否是给您带来麻烦的原因。