Анимация затухающего элемента в реактивном компоненте

Question

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

Мое затухание пока работает отлично, и вот как это делается сейчас:

import React, { Component } from 'react'
import classnames from 'classnames'

class AlertMessage extends Component {
    state = ({ autoHide: false })

    componentDidMount(){
        const { autoHide } = this.props
        if (autoHide && !this.state.hasClosed) {
            setTimeout(() => {
                    this.setState({ autoHide: true, hasClosed: true })
            }, 5000)
        }
    }

    render() {
        const { error, info, success, warning, text } = this.props

        const classNames = {
            'error': error,
            'info': info,
            'success': success,
            'warning': warning,
            'alert-hidden': this.state.autoHide
        }

        return (
            <div className={classnames("alert-message", classNames)}>
                {text}
            </div>
        )
    }
}

export default AlertMessage

Теперь я хотел бы удалить setTimeout и состояние, сделав его функциональным компонентом без сохранения состояния. Моя проблема в том, что задержка перехода в моем стиле, кажется, не работает, и я боюсь, что это связано с тем, как classNames применяет классы к компоненту.

Вот мой стиль:

.alert-message{
    overflow-y: hidden;
    opacity: 1;
    max-height: 80px;
    transition-property: all 450ms;
    transition-duration: 450ms;
    transition-timing-function: cubic-bezier(0, 1, 0.5, 1);
    transition-delay: 5000ms;

Спасибо

Answer 1

Компонент Toast инфраструктуры BluePrint обрабатывает это с помощью функции тайм-аута. Вы можете извлечь ту же функциональность из его исходного кода

Насколько я знаю, вы не можете добиться анимации только с помощью CSS в настоящее время.