Question

我尝试使用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;
}

安装组件时，会显示元素，但不会进入任何转换。我在那里做错了吗？

谢谢！

Answer 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

使用React和React Transition Group在页面之间淡入淡出

1 个答案: