Question

我有一个组件可以在其ReactCSSTransitionGroup更改时更改其stage内的子组件。当页面加载时transitionAppear工作正常，但没有转换假或转换输入动画，当支柱更改时/ ReactCSSTransitionGroup内的组件发生变化时。当stage从'CONTENT'更改为'BOOKING'时，Content组件会在Booking组件淡入时淡出。

页面组件：

import React, {PropTypes} from 'react';
import ReactCSSTransitionGroup from 'react-addons-css-transition-group';

export default class Page extends React.Component {
    static propTypes = { stage: PropTypes.string };

    getComponent(stage) {
        switch (stage) {
            case 'CONTENT': {
                return (
                    <Content />
                );
            }
            case 'BOOKING': {
                return (
                    <Booking />
                );
            }
        }
    }

    shouldComponentUpdate(nextProps) {
        return nextProps.stage !== this.props.stage;
    }

    render() {
        return (
            <div>
                <ReactCSSTransitionGroup
                    transitionName='component-fade'
                    transitionAppear={true}
                    transitionEnter={true}
                    transitionLeave={true}
                    transitionEnterTimeout={500}
                    transitionAppearTimeout={500}
                    transitionLeaveTimeout={500}
                    component='div'
                >
                    {this.getComponent(this.props.stage)}
                </ReactCSSTransitionGroup>
            </div>
        );
    }
}

CSS：

.component-fade-enter {
    opacity: 0;
    transform: translateY(+2em);
}

.component-fade-enter.component-fade-enter-active {
    opacity: 1;
    transform: translateY(0em);
    transition: opacity 200ms ease-out, transform 200ms ease-in;
}

.component-fade-leave {
    transform: translateY(0em);
    opacity: 1;
}

.component-fade-leave.component-fade-leave-active {
    transform: translateY(+2em);
    opacity: 0;
    transition: opacity 200ms ease-in, transform 200ms ease-in;
}

.component-fade-appear {
    opacity: 0;
    transform: translateY(+2em);
}

.component-fade-appear.component-fade-appear-active {
    opacity: 1;
    transform: translateY(0em);
    transition: opacity 200ms ease-out, transform 200ms ease-in;
}

Answer 1

找出我自己的问题的答案，只需要为其密钥更改为this.props.stage的组件添加div包装器

<ReactCSSTransitionGroup
    transitionName='component-fade'
    transitionAppear={true}
    transitionEnter={true}
    transitionLeave={true}
    transitionEnterTimeout={500}
    transitionAppearTimeout={500}
    transitionLeaveTimeout={500}
    component='div'
>
    <div key={this.props.stage}>
        {this.getComponent(this.props.stage)}
    </div>
</ReactCSSTransitionGroup>

ReactCSSTransitionGroup没有动画组件更改

1 个答案: