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} />;
    });

使用＆amp;＆amp ;;返回变量操作员可以给你有趣的结果。尝试做一些明确的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>时会发生什么。看看会发生什么，看看是不是这会给你带来麻烦。

ReactJS ReactCSSTransitionGroup仅在初始加载时设置动画

1 个答案: