1

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

受到在初始渲染上应用 React.js CSS 转换的帖子的启发，我为每个页面加载的根组件执行了此操作：

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

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

谢谢！

4

1 回答 1

0

出现转换在 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 页面转换

于 2018-04-13T16:54:54.897 回答