Question

我正在使用ReactJS创建包含动画的折叠/扩展列表。您可以查看https://codepen.io/zhaoyi0113/pen/qjRKXE中的代码。当用户点击顶部的Extend按钮时，列表应在1秒内显示，同时footer应移至底部。我目前的代码不能很好地工作。首先，列表项不会以正确的动画样式显示。似乎所有项目都是同时渲染的。其次，单击extend按钮后，页脚组件立即移动到底部。如何使用reactjs动画正确实现列表？

请在React Animation Demo上通过joey（@zhaoyi0113）查看笔CodePen。

以下是我正在使用的reactjs代码：

const ReactCSSTransitionGroup = React.addons.CSSTransitionGroup;


const Container = React.createClass({

    getInitialState() {
        return {
            items:  ['Click', 'To', 'Remove', 'An', 'Item'],
            extend: false
        };
    },

    render() {

        return (
            <div className="container">
                <div className="animation-container">
                <div onClick={() => this.expendItems()} className="item">
                    {this.state.extend?'Collapse':'Extend'}
                </div>
                    <ReactCSSTransitionGroup transitionName="example">
                        {this.renderItems()}
                    </ReactCSSTransitionGroup>

                    <div>Footer</div>
                </div>
            </div>
        );
    },

    renderItems() {
        const items = this.state.extend? this.state.items: [];

        console.log('render items ', items);
        return items.map((item, i) => {
            return (
                <div key={item} className="item">
                    {item}
                </div>
            );  
        }); 
    },

    expendItems() {
        this.setState({extend: !this.state.extend});
    }

});

ReactDOM.render(<Container/>, document.body);

Answer 1

使用ReactCSSTransitionGroup的方式同时渲染所有组件。

此外，你有错误的初始翻译值，你想从负值转换为0，这样按钮似乎从展开按钮下滑下来

body {
    font-family: 'Open Sans', sans-sarif;
    padding: 25px;
    background-color: $color6;
    text-align: center;
}
.container {
    text-align: center;
    vertical-align: middle;
    overflow: hidden;
}
.animation-container {
    display: inline-block;
}
.item {
    background-color: $color3;
    width: 400px;
    text-align: center;
    padding: 10px 5px;
    margin-top: 10px;
    border-radius: 8px;
    font-weight: 600;
    color: mix(black, $color3, 60%);
    position: relative;

    &:hover {
        cursor: pointer;
    }
}
div > .item {
    margin-top: 0px;
}
.example-enter {
    top: -240px;
}
.example-enter.example-enter-active {
    top: 0px;
    transition: top 1s ease;
}
.example-leave {
    top: 0px;
    transition: top 1s ease;
}
.example-leave.example-leave-active {
    top: -240px;
}

https://codepen.io/anon/pen/Gvrgqm

如何使用`ReactCSSTransitionGroup`创建折叠/扩展列表

1 个答案: