Question

试图弄清楚这个ReactCSSTransitionGroup动画的工作原理：

class SlideExample extends React.Component{
    constructor(props) {
        super(props);
        this.state = { visible: false };
        this.handleClick = this.handleClick.bind(this)
    }

    handleClick() {
        this.setState({ visible: ! this.state.visible });
    }

    render() {
        return <div>
            <button onClick={this.handleClick}>{this.state.visible ? 'Slide up' : 'Slide down'}</button>
            <ReactCSSTransitionGroup 
                transitionName="example"
                transitionEnterTimeout={300}
                transitionLeaveTimeout={300}>
                { 
                    this.state.visible 
                    ? <div className='panel'>
                        <ul className="project-list">
                            <li>one</li>
                            <li>two</li>
                            <li>three</li>
                        </ul>
                    </div> 
                    : null 
                }
            </ReactCSSTransitionGroup>
        </div>
    }
}


const ProjectList = (props) => {
    return(
        <div className="ProjectList">
            <SlideExample />
        </div> 
    );
}

但不是这样的：

class App extends Component {
    constructor() {
        super();
        this.state = {
            _isProjectNavOpen: true,
        }
    }
    _toggleProjectNav() {
        this.setState(prevState => ({
            _isProjectNavOpen: !prevState._isProjectNavOpen,
        }));
    }
    render() {
        return(
            <div className="App">
                <Router>
                    <div className="main-content">
                        <Route path="/projects" component={(props, state, params) => 
                            <ProjectList 
                                _toggleProjectNav={this._toggleProjectNav} 
                                _isProjectNavOpen={this.state._isProjectNavOpen} 
                            {...props} />} />
                    </div>
                </Router>
            </div>
        );
    }
}
const ProjectList = (props) => {
    return(
        <div className="ProjectList">
            <div className="center title" onClick={props._toggleProjectNav} id="Menu">Menu</div>

            <ReactCSSTransitionGroup 
                transitionName="example"
                transitionEnterTimeout={300}
                transitionLeaveTimeout={300}>
                { 
                    props._isProjectNavOpen 
                    ? <div className='panel'>
                        <ul className="project-list">
                            <li>xx one</li>
                            <li>xx two</li>
                            <li>xx three</li>
                        </ul>
                    </div> 
                    : null 
                }
            </ReactCSSTransitionGroup>

        </div>
    );
}

CSS：

.panel {
    width: 200px;
    height: 100px;
    background: green;
    margin-top: 10px;
}

.example-enter {
    height: 0px;
}

.example-enter.example-enter-active {
    height: 100px;
    -webkit-transition: height .3s ease;
}

.example-leave.example-leave-active {
    height: 0px;
    -webkit-transition: height .3s ease;
}

_toggleProjectNav是从父组件向下传递的一个prop，它切换_isProjectNavOpen状态为true / false;它的工作原理是面板确实隐藏/显示，但没有动画......它是否与从父母传递的状态有关？试图了解ReactCSSTransitionGroup的工作原理。

谢谢！

Answer 1

此代码适用于我。在这种情况下，这不是ReactCSSTransitionGroup问题。这个问题很可能与CSS有关。注意，一些浏览器在转换之前需要初始高度值。所以你需要这样的东西：

.example-leave {
    height: 100px;
}

ReactJS ReactCSSTransitionGroup为什么它可以工作一个组件而不是另一个组件？

1 个答案: