React:动画页面切换

Question

我想知道是否有人可以提供一些有关如何使用React.js实现动画组件/页面切换的见解.

我想要实现的是组件/页面转换,如http://www.semplicelabs.com/上的转换- 转换不透明度和margin-top的标题以及转换不透明度的内容.

当显示新的组件/页面时,当前显示的组件/页面应该在新的组件/页面转换之前转换出来.到目前为止LayoutComponent,我将页面组件呈现为CSSTransitionGroup:

import React from 'react/addons';

export default class LayoutComponent extends React.Component {
  constructor(props) {
    super(props);
    this.state = { page: '' };
  },

  setPage(page) {
    this.setState({ page });
  }

  render() {
    return (
      <React.addons.CSSTransitionGroup transitionName='page'>
        {this.state.page}
      </React.addons.CSSTransitionGroup>
    );
  }
}

我还有两个页面组件,FirstPage和SecondPage.

import React from 'react';

export default class FirstPage extends React.Component {
  render() {
    return (
      <div>
        <header className='header'>
          <div className='container'>
            First Header
          </div>
        </header>
        <div className='content'>
          <div className='container'>
            First Content
          </div>
        </div>
      </div>
    );
  }
}

SecondPage代码和FirstPage代码之间的唯一区别是.containerdiv 中的内容和类名.

我接下来尝试做的是添加一个带有.8s持续时间的离开过渡和一个带有.8s持续时间和延迟的输入过渡.我看到的主要问题是新页面组件在旧页面的离开转换完成之前安装.这是我目前的CSS:

.page-enter {
  background-color: #f2f2f2;
  transition: background-color .8s linear .8s;
}

.page-enter-active {
  background-color: #f2f1f1;
}

.page-leave {
  background-color: #f2f1f1;
  transition: background-color .8s linear;
}

.page-leave-active {
  background-color: #f2f2f2;
}

.page-enter .header {
  margin-top: -80px;
  opacity: 0;
  transition: opacity .8s ease-in-out .8s;
  transition: margin-top .8s ease-in-out .8s;
}

.page-enter-active .header {
  margin-top: 0;
  opacity: 1;
}

.page-leave .header {
  margin-top: 0;
  opacity: 1;
  transition: opacity .8s ease-in-out;
  transition: margin-top .8s ease-in-out;
}

.page-leave-active .header {
  margin-top: -80px;
  opacity: 0;
}

.page-enter .content {
  opacity: 0;
  transition: opacity .8s ease-in-out .8s;
}

.page-enter-active .content {
  opacity: 1;
}

.page-leave .content {
  opacity: 1;
  transition: opacity .8s ease-in-out;
}

.page-leave-active .content {
  opacity: 0;
}

我知道我可以使用初始安装设置动画transitionAppear={true}- 但这对于在旧组件转换之前安装新组件的问题没有帮助.

这是我已经困难了几天的问题,我找不到解决方案.

一些代码可以使用:https: //jsfiddle.net/gonsfx/xva2g6oo/

Answer 1

我在页面中添加了一个状态来保存 a opacity（用于动画），并在组件安装时稍有延迟时将其设置为 1（初始 = 0）。所以我在每个页面添加了两个功能。

componentDidMount() {
    setTimeout(() => {
        this.setState({
            opacity: 1
        });
    }, 20);
}

getStyle() {
    return { opacity: this.state.opacity };
}

然后我添加了一个构造函数来制作初始的东西......

constructor(props) {
    super(props);
    this.state = { opacity: 0 };
    this.getStyle = this.getStyle.bind(this);
    this.componentDidMount = this.componentDidMount.bind(this);
}

这是一个演示。

这些组件将立即出现在页面上，所以我认为不可能制作淡出动画（至少，我没有找到解决方案）。