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

Question

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

看笔React Animation Demo通过乔伊(@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