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

【问题标题】：Fading between pages with React and React Transition Group使用 React 和 React 过渡组在页面之间淡入淡出
【发布时间】：2018-04-13 08:16:02
【问题描述】：

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

受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;
}

安装组件时，会显示元素，但没有任何进入过渡。我在那里做错了吗？

谢谢！

【问题讨论】：

标签： reactjs react-starter-kit react-transition-group

【解决方案1】：

出现转换在 ComponentDidMount() 中/之后将无效。

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

在您的情况下，如果您将代码保留在 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

【讨论】：