Question

我正在尝试使用消息的动画来创建某种聊天。

添加新项目后，第一个项目会向上滑动并淡出，但是其余的消息会在动画制作完成后跳转。我想向上滑动其余消息，而第一条消息向上滑动。

我的渲染方法

render() {
    const MAX = 5;
    const messages = [...this.state.messages];

    return (
        <TransitionGroup>
            {messages.slice(-MAX).map(message =>
                <CSSTransition key={message.id} classNames="message-fade" timeout={500}>
                    <div key={message.id}>{message.text}</div>
                </CSSTransition>
            )}
        </TransitionGroup>
    );
};

CSS：

.message-fade-enter {
    opacity: 0.01;
    transform: translateY(100%);
    transition: all 1000ms linear;
}

.message-fade-enter.message-fade-enter-active {
    opacity: 1;
    transform: translateY(0%);
    transition: all 1000ms linear;
}

.message-fade-exit {
    position: absolute;
    opacity: 1;
    transition: all 1000ms linear;
}

.message-fade-exit.message-fade-exit-active {
    opacity: 0.01;
    transform: translateY(-100%);
    transition: all 1000ms linear;
}

这是我目前情况的一个简笔画： https://codepen.io/Kingsmedia/pen/ywjryx

反应CSSTransitionGroup平滑子动画

0 个答案: