Реагировать CSSTransitionGroup плавной дочерней анимации - PullRequest
Новая
       12

Реагировать CSSTransitionGroup плавной дочерней анимации

0 голосов
/ 17 марта 2019

Я пытаюсь создать что-то вроде чата с анимацией вставки и извлечения сообщений.

Когда добавляется новый элемент, первый перемещается вверх и исчезает, а остальные сообщения всплывают, когдаанимация завершена.Я хотел бы сдвинуть оставшиеся сообщения вверх, в то время как первое сообщение выдвигается вверх.

Мой метод рендеринга 

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

...