使用React和React过渡组在页面之间淡入淡出

Question

我正在尝试使用React Starter Kit在React中淡入淡出和离开页面之间。

受post Applying React.js CSS Transitions on initial render的启发，我为每个页面加载的根组件做了以下操作：

import React from 'react';
import withStyles from 'isomorphic-style-loader/lib/withStyles';
import ReactCSSTransitionGroup from 'react-addons-css-transition-group';
import s from './About.less';

class About extends React.Component {
    constructor(props) {
        super(props);
        this.state = {
            mounted: false,
        };
    }
    componentDidMount = () => {
        this.setState({
            mounted: true,
        });
    };
    render() {
        const child = this.state.mounted ? <h1>Hello world</h1> : null;

        return (
            <ReactCSSTransitionGroup
                transitionName="example"
                transitionAppear
                transitionEnterTimeout={500}
                transitionLeaveTimeout={300}
            >
                {child}
            </ReactCSSTransitionGroup>
        );
    }
}

export default withStyles(s)(About);

在css中，我有：

.example-appear {
  opacity: 0.01;
  transition: opacity 0.5s ease-in;
}

.example-appear.example-appear-active {
  opacity: 1;
}

安装组件时，将显示元素，但没有任何进入过渡。我是不是做错了什么？

谢谢!

Answer 1

在ComponentDidMount()中/之后，显示过渡将不起作用。

如果想要查看ComponentDidMount()之后的转换，请使用Enter/Leave transition。

在您的例子中，如果您将代码放在componentWillMount()中，而不是componentDidMount()，它将很好地工作。我已经修改了你的代码。希望这能有所帮助。

class About extends React.Component {
constructor(props) {
    super(props);
    this.state = {
        mounted: false
    };
}
componentWillMount ()  {
    this.setState({
        mounted: true
    });
};
render() {
    const child = this.state.mounted ? <h1>Hello world</h1> : null;

    return (
        <ReactCSSTransitionGroup
            transitionName="example"
            transitionAppear

        >
            {child}
        </ReactCSSTransitionGroup>
    );
}

}

参考React Page Transition