Question

我尝试使用cd -向我的应用添加页面转换，但它无效。对于某些页面，它有效，但有些页面没有。许多示例显示了如何使用React路由器。但是因为我使用Meteor，我使用不同的路由器（FlowRouter）。

这是我的渲染方法：

ReactCSSTransitionGroup

以下是我尝试添加转场的方法：

render() {
  return (
    <div>
      {this.props.content()}
    </div>
  );
}

css：

<ReactCSSTransitionGroup
  transitionName="pageTransition"
  transitionEnterTimeout={500}
  transitionLeaveTimeout={300}
  transitionAppear={true}
  transitionAppearTimeout={500}
>
  {/* Content */}
  {React.cloneElement(this.props.content(), {
    key: uuid.v1(),
  })}

</ReactCSSTransitionGroup>

知道如何使这项工作吗？

Answer 1

我明白了！您的CSS动画正在尝试使用fadeIn，但这不是CSS属性。您需要将其更改为不透明度。像这样：

//Page transition
.pageTransition-enter {
  opacity: 0.01;
}
.pageTransition-enter.pageTransition-enter-active {
  animation: opacity 1s ease-in;
}
.animation-leave {
  opacity: 1;
}
.pageTransition-leave.pageTransition-leave-active {
  animation: opacity 3s ease-in;
}
.pageTransition-appear {
  opacity: 0.01;
}
.pageTransition-appear.pageTransition-appear-active {
  animation: opacity 5s ease-in;
}

Answer 2

尝试在返回调用之前定义内部组件：

render() {
    const clonedElement = <div>{this.props.content()}</div>;

    return (
        <ReactCSSTransitionGroup transitionName="pageTransition" transitionEnterTimeout={500} transitionLeaveTimeout={300} transitionAppear={true} transitionAppearTimeout={500}>
            {clonedElement}
        </ReactCSSTransitionGroup>
      );
    }

如何在不使用路由器的情况下将页面转换添加到React？

2 个答案: